JavaScript Academy · 课时

打开 WebSocket 连接

Q: 「打开 WebSocket 连接」这节课中我会学到什么？

连接到 WebSocket 服务器。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

连接到 WebSocket 服务器。

打开 WebSocket 连接 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

什么是 WebSockets

WebSockets 通过单个 TCP 连接，在浏览器与服务器之间提供持久的全双工连接。与 HTTP 请求/响应模式不同，任意一方都可以随时发送消息，非常适合聊天、实时信息流和游戏。

ws 和 wss 方案

WebSocket URL 使用 ws://（明文）或 wss://（经过 TLS 加密）。在生产环境中，请始终优先使用 wss://，就像使用 https 一样。

const url = "wss://example.com/socket";

创建连接

使用 new WebSocket(url) 创建 socket。握手会立即开始；连接打开之前还无法使用。

const socket = new WebSocket("wss://example.com/socket");
console.log(socket.url);

onopen 事件

onopen 会在握手完成后触发。只有从这一刻起，发送数据才是安全的。

socket.onopen = (event) => {
  console.log("Connection established");
  socket.send("Hello server");
};

addEventListener 替代方案

您可以使用 addEventListener，而不是使用 on* 属性来附加多个处理程序。

socket.addEventListener("open", () => {
  console.log("open via listener");
});

连接 readyState

readyState 会报告生命周期状态：CONNECTING (0)、OPEN (1)、CLOSING (2)、CLOSED (3)。

if (socket.readyState === WebSocket.OPEN) {
  socket.send("ready!");
}

子协议

第二个参数用于协商子协议。服务器会选择其中一个，连接打开后您可以读取 socket.protocol。

const s = new WebSocket("wss://example.com", ["chat", "v2.chat"]);
s.onopen = () => console.log("Using", s.protocol);

同源与混合内容

通过 https 加载的页面只能打开 wss:// 连接——打开 ws:// 会因混合内容而被阻止。请据此规划 URL。

二进制类型

将 binaryType 设置为 "blob"（默认值）或 "arraybuffer"，以控制二进制帧的接收方式。

socket.binaryType = "arraybuffer";

最小客户端

将这些内容组合起来：打开连接、记录状态并进行清理。

const socket = new WebSocket("wss://example.com/socket");
socket.onopen = () => console.log("opened");
socket.onclose = () => console.log("closed");

连接超时

WebSockets 没有内置的连接超时机制。请使用一个计时器：如果 onopen 未在规定时间内触发，就关闭 socket。

const socket = new WebSocket(url);
const timer = setTimeout(() => {
  if (socket.readyState !== WebSocket.OPEN) socket.close();
}, 5000);
socket.onopen = () => clearTimeout(timer);

快速检查

测试连接基础知识。

回顾：建立连接

您了解了 ws/wss 方案，使用 new WebSocket 创建了 socket，处理了 onopen，检查了 readyState，协商了子协议，并添加了连接超时机制。下一步：发送和接收消息。

常见问题解答

「打开 WebSocket 连接」课时是免费的吗？

是的 — 「打开 WebSocket 连接」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「打开 WebSocket 连接」这节课中我会学到什么？

连接到 WebSocket 服务器。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「打开 WebSocket 连接」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy