React Academy · 课时

浏览器中的 WebSocket 基础

Q: 「浏览器中的 WebSocket 基础」这节课中我会学到什么？

建立 WebSocket 连接、发送消息，并使用原生 WebSocket API 处理事件。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

建立 WebSocket 连接、发送消息，并使用原生 WebSocket API 处理事件。

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

什么是 WebSocket

WebSocket 是一种通过单个 TCP 连接提供全双工通信的协议。与 HTTP 不同，连接会保持打开状态，因此服务器可以随时向客户端推送数据。

打开连接

使用 ws:// 或 wss:// URL 创建 WebSocket 对象。连接会异步打开。

const ws = new WebSocket('wss://api.example.com/ws');

ws.onopen = () => {
  console.log('Connection established');
};

发送消息

使用 ws.send() 发送数据。您可以发送字符串或二进制数据（ArrayBuffer、Blob）。发送对象前，请先将其编码为 JSON。

ws.onopen = () => {
  ws.send(JSON.stringify({ type: 'join', room: 'general' }));
  ws.send('Hello, server!');
};

接收消息

每当服务器发送数据时，onmessage 事件就会触发。数据位于 event.data 中，类型可以是字符串或二进制类型。

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
};

处理错误与关闭

处理 onerror 和 onclose 事件。关闭事件包含代码和原因，用于说明连接结束的原因。

ws.onerror = (error) => {
  console.error('WebSocket error:', error);
};

ws.onclose = (event) => {
  console.log(`Closed: ${event.code} ${event.reason}`);
  if (event.wasClean) {
    console.log('Clean disconnect');
  } else {
    console.log('Connection lost — will retry');
  }
};

关闭代码

标准 WebSocket 关闭代码：1000 = 正常关闭，1001 = 正在离开，1006 = 异常关闭（没有关闭帧），1008 = 违反策略。

readyState

ws.readyState 会告诉您当前的连接状态：CONNECTING (0)、OPEN (1)、CLOSING (2) 或 CLOSED (3)。发送前请务必检查该状态。

function sendSafely(ws, data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data));
  } else {
    console.warn('WebSocket not open, dropping message');
  }
}

关闭连接

调用 ws.close(code, reason) 发起正常关闭。服务器会收到关闭帧，并可以用自己的关闭帧进行响应。

// Normal close
ws.close(1000, 'User logged out');

// Close from a cleanup effect
return () => ws.close();

二进制数据

设置 ws.binaryType = 'arraybuffer'（或 'blob'）以接收二进制消息。这适用于音频、图像或自定义协议。

ws.binaryType = 'arraybuffer';

ws.onmessage = (event) => {
  if (event.data instanceof ArrayBuffer) {
    const view = new Uint8Array(event.data);
    console.log('Binary message, bytes:', view.length);
  } else {
    console.log('Text message:', event.data);
  }
};

心跳 / Ping-Pong

浏览器 WebSocket API 不会暴露 ping 帧，但您可以实现应用层心跳：每隔 N 秒发送一条 ping 消息，并等待 pong 响应。

function startHeartbeat(ws) {
  return setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({ type: 'ping' }));
    }
  }, 30_000);
}

WebSocket 与服务器发送事件

对于双向通信（聊天、游戏），请使用 WebSocket。对于仅从服务器到客户端的数据流（通知、实时动态），请使用服务器发送事件（SSE）——SSE 通过普通 HTTP 工作，并会自动重新连接。

快速检查

哪个 WebSocket readyState 值表示连接已打开并可以发送数据？

要点回顾

使用 new WebSocket(url) 创建连接，通过 ws.send() 发送经过 JSON 字符串化的对象，并处理 onmessage、onerror 和 onclose 事件。发送前检查 readyState，并使用 ws.close(1000) 正常关闭连接。

常见问题解答

「浏览器中的 WebSocket 基础」课时是免费的吗？

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

「浏览器中的 WebSocket 基础」这节课中我会学到什么？

建立 WebSocket 连接、发送消息，并使用原生 WebSocket API 处理事件。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

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

「浏览器中的 WebSocket 基础」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 React Academy