WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。客户端和服务端可以随时互相推送数据，适合需要双向低延迟通信的场景。

HTTP 轮询 vs WebSocket

┏━━━━━━━ HTTP 轮询（Polling）━━━━━━━━┓
┃                                     ┃
┃  Client ━━ GET /data ━━▶ Server     ┃  → 有数据就返回，没数据返回空
┃  Client ━━ GET /data ━━▶ Server     ┃  → 每隔 N 秒重复请求
┃  Client ━━ GET /data ━━▶ Server     ┃  → 大量无效请求，浪费带宽
┃                                     ┃
┃  单向：只能客户端主动请求           ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛


┏━━━━━━━━ WebSocket ━━━━━━━━━━━━━━━━━┓
┃                                     ┃
┃  Client ━━ HTTP Upgrade ━━▶ Server  ┃  → 握手（仅一次）
┃  Client ◀━━━━ data ━━━━━▶ Server    ┃  → 双向实时通信
┃  Client ◀━━━━ data ━━━━━▶ Server    ┃  → 无需重复建连
┃                                     ┃
┃  双向：服务端也可以主动推送         ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

基础概念

握手过程

握手请求（客户端 → 服务端）

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
Sec-WebSocket-Protocol: chat, superchat

握手响应（服务端 → 客户端）

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

Sec-WebSocket-Accept = Base64(SHA1(Sec-WebSocket-Key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"))

连接生命周期

Client                                    Server
  │                                          │
  │─── HTTP GET (Upgrade: websocket) ──────▶│  ① 握手请求
  │◀── HTTP 101 Switching Protocols ────────│  ② 握手响应
  │                                          │
  │◀═══════ 双向数据传输 ═══════════════════▶│  ③ 通信阶段
  │─── Ping ────────────────────────────────▶│  ④ 心跳检测
  │◀── Pong ─────────────────────────────────│
  │                                          │
  │─── Close Frame ─────────────────────────▶│  ⑤ 关闭连接
  │◀── Close Frame ──────────────────────────│

数据帧格式

WebSocket 通过帧（Frame） 传输数据，每个帧的结构如下：

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len |    Extended payload length   |
|I|S|S|S|  (4)  |A|     (7)     |           (16/64)            |
|N|V|V|V|       |S|             |   (if payload len==126/127)  |
| |1|2|3|       |K|             |                              |
+-+-+-+-+-------+-+-------------+- - - - - - - - - - - - - - - +
|                               |                              |
|  Masking-key (0 or 4 bytes)   |                              |
+-------------------------------+------------------------------+
|                     Payload Data                             |
+--------------------------------------------------------------+

心跳机制（Ping/Pong）

WebSocket 连接可能因网络异常而”半死”（TCP 连接还在但实际不可达），心跳用于发现并清理这类死连接。

正常情况：
Client ─── Ping ──▶ Server
Client ◀── Pong ─── Server     ← 连接存活

异常情况：
Client ─── Ping ──▶ Server
（等待超时，无 Pong 响应）       ← 连接已死，主动断开

服务端实现见 Node.js 实现。

浏览器端 API

const ws = new WebSocket("ws://localhost:3000");

ws.onopen = () => {
  ws.send("Hello"); // 发送文本
  ws.send(new Blob(["binary data"])); // 发送二进制
  ws.send(JSON.stringify({ type: "join", room: 1 })); // 发送 JSON
};

ws.onmessage = (event) => {
  console.log("收到:", event.data); // string 或 Blob
};

ws.onclose = (event) => {
  console.log(`关闭: code=${event.code}, reason=${event.reason}`);
  // event.wasClean 表示是否正常关闭
};

ws.onerror = (error) => {
  console.error("错误:", error);
};

// 主动关闭
ws.close(1000, "Normal closure");

安全性

wss:// 加密

ws:// 是明文传输，生产环境必须使用 wss://（WebSocket over TLS），等同于 HTTPS 对 HTTP 的关系。

ws://example.com/chat     → 明文，不安全
wss://example.com/chat    → TLS 加密，生产必须

常见安全问题

关闭状态码

1006 不能通过代码手动发送，只在连接异常断开时由浏览器自动设置。

子协议与常见应用

WebSocket 只定义了”帧 + 双向传输”，具体消息格式和交互语义通常由子协议（Subprotocol）约定，握手时通过 Sec-WebSocket-Protocol 协商。常见子协议：

消息压缩：permessage-deflate

RFC 7692 定义的 WebSocket 压缩扩展。ws 库、Socket.IO 默认启用；浏览器也支持。

• 大文本消息（JSON）压缩率可达 60–80%
• 小消息（< 几百字节）压缩反而更慢、更大
• CPU 敏感或高频小消息场景建议关闭：new WebSocketServer({ perMessageDeflate: false })

扩展性与生态

• 服务端实现要点（ws 库 / Socket.IO、心跳、房间）见 Node.js 实现
• 多实例部署的水平扩展方案见 水平扩展