1
// 短轮询（最不推荐，但最简单）
2
setInterval(async () => {
3
  const data = await fetch('/api/messages').then(r => r.json());
4
  render(data);
5
}, 5000);
6

7
// 长轮询
8
async function longPoll() {
9
  try {
10
    const data = await fetch('/api/messages?wait=30').then(r => r.json());
11
    // 服务端 hold 住连接，有数据或超时才返回
12
    render(data);
13
  } finally {
14
    longPoll();   // 立即再发起
15
  }
16
}
17
longPoll();

1
WebSocket 是应用层协议，基于 TCP，通过 HTTP Upgrade 建立连接：
2

3
1. 客户端发起 HTTP 请求（Upgrade 头）
4
GET /chat HTTP/1.1
5
Host: example.com
6
Upgrade: websocket
7
Connection: Upgrade
8
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==      ← 客户端随机生成
9
Sec-WebSocket-Version: 13
10

11
2. 服务端响应 101 Switching Protocols
12
HTTP/1.1 101 Switching Protocols
13
Upgrade: websocket
14
Connection: Upgrade
15
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
16
  ↑ = Base64(SHA1(Sec-WebSocket-Key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"))
17

18
3. TCP 连接保持，转为 WebSocket 帧协议双向通信
19

20
关键点：
21
- 握手用 HTTP，之后不是 HTTP（帧协议）
22
- 端口默认 80（ws://）或 443（wss://，加密）
23
- Sec-WebSocket-Key/Accept 用于防止普通 HTTP 请求误升级
24
- 建立后全双工，客户端和服务端都可以主动发消息

1
const ws = new WebSocket('wss://example.com/chat');
2

3
// 4 个核心事件
4
ws.onopen = () => {
5
  console.log('连接建立');
6
  ws.send(JSON.stringify({ type: 'login', token }));
7
};
8
ws.onmessage = (e) => {
9
  const msg = JSON.parse(e.data);
10
  handleMessage(msg);
11
};
12
ws.onerror = (e) => console.error('错误', e);
13
ws.onclose = (e) => {
14
  console.log('关闭', e.code, e.reason);
15
  // 常见 close code：
16
  // 1000 正常关闭 / 1001 端点离开 / 1006 异常断开（无 close 帧）
17
  // 1011 服务端错误 / 1015 TLS 握手失败
18
};
19

20
// readyState 四个状态
21
WebSocket.CONNECTING  // 0
22
WebSocket.OPEN        // 1
23
WebSocket.CLOSING     // 2
24
WebSocket.CLOSED      // 3
25

26
// 发送多种数据
27
ws.send('hello');                    // 文本
28
ws.send(JSON.stringify({ a: 1 }));   // JSON 序列化
29
ws.send(arrayBuffer);                // 二进制
30
ws.send(blob);                       // Blob
31

32
// 主动关闭
33
ws.close(1000, 'user logout');

1
// 为什么需要心跳？
2
// 1. NAT/防火墙会关闭长时间空闲连接（通常 60s-5min）
3
// 2. 网络切换（WiFi → 4G）后 TCP 连接失效但客户端不知道
4
// 3. 服务端异常断开，浏览器不一定触发 onclose
5

6
class ReconnectingWebSocket {
7
  constructor(url, options = {}) {
8
    this.url = url;
9
    this.heartbeatInterval = options.heartbeatInterval || 30000;
10
    this.reconnectInterval = options.reconnectInterval || 3000;
11
    this.maxReconnectTimes = options.maxReconnectTimes || 10;
12
    this.reconnectTimes = 0;
13
    this.handlers = new Map();       // 事件监听
14
    this.manualClose = false;        // 是否主动关闭
15
    this.connect();
16
  }
17

18
  connect() {
19
    this.ws = new WebSocket(this.url);
20
    this.ws.onopen = () => {
21
      this.reconnectTimes = 0;       // 重置重连计数
22
      this.startHeartbeat();
23
      this.emit('open');
24
    };
25
    this.ws.onmessage = e => this.emit('message', e);
26
    this.ws.onclose = e => {
27
      this.stopHeartbeat();
28
      this.emit('close', e);
29
      if (!this.manualClose) this.reconnect();
30
    };
31
    this.ws.onerror = e => this.emit('error', e);
32
  }
33

34
  startHeartbeat() {
35
    this.heartbeatTimer = setInterval(() => {
36
      if (this.ws.readyState === WebSocket.OPEN) {
37
        this.ws.send(JSON.stringify({ type: 'ping', ts: Date.now() }));
38
      }
39
    }, this.heartbeatInterval);
40

41
    // 超时未收到 pong，认为连接死了，主动关闭触发重连
42
    this.pongTimeout = setTimeout(() => {
43
      this.ws.close();
44
    }, this.heartbeatInterval * 1.5);
45

46
    this.ws.addEventListener('message', e => {
47
      if (JSON.parse(e.data).type === 'pong') {
48
        clearTimeout(this.pongTimeout);
49
      }
50
    });
51
  }
52

53
  stopHeartbeat() {
54
    clearInterval(this.heartbeatTimer);
55
    clearTimeout(this.pongTimeout);
56
  }
57

58
  reconnect() {
59
    if (this.reconnectTimes >= this.maxReconnectTimes) {
60
      this.emit('reconnect-failed');
61
      return;
62
    }
63
    // 指数退避：3s → 6s → 12s → 24s（最大 30s）
64
    const delay = Math.min(
65
      this.reconnectInterval * Math.pow(2, this.reconnectTimes),
66
      30000
67
    );
68
    setTimeout(() => {
69
      this.reconnectTimes++;
70
      this.connect();
71
    }, delay);
72
  }
73

74
  send(data) {
75
    if (this.ws.readyState === WebSocket.OPEN) {
76
      this.ws.send(data);
77
    } else {
78
      // 离线消息队列（可选）
79
      this.pendingQueue = this.pendingQueue || [];
80
      this.pendingQueue.push(data);
81
    }
82
  }
83

84
  close() {
85
    this.manualClose = true;
86
    this.stopHeartbeat();
87
    this.ws.close(1000, 'client close');
88
  }
89

90
  on(event, fn) {
91
    if (!this.handlers.has(event)) this.handlers.set(event, new Set());
92
    this.handlers.get(event).add(fn);
93
  }
94
  emit(event, ...args) {
95
    this.handlers.get(event)?.forEach(fn => fn(...args));
96
  }
97
}
98

99
// 使用
100
const ws = new ReconnectingWebSocket('wss://example.com/chat');
101
ws.on('message', e => console.log(e.data));
102

103
// 补充优化：
104
// - 监听 online/offline 事件，网络恢复立即重连
105
// - 页面隐藏时（visibilitychange）降低心跳频率
106
// - 登录 token 过期时不重连，跳登录页
107
window.addEventListener('online', () => ws.reconnect());

1
// 统一消息协议（前后端约定）
2
{
3
  "type": "chat.message",       // 事件类型（点分命名）
4
  "id": "msg-uuid-xxx",          // 消息 ID（幂等/去重/ACK）
5
  "seq": 12345,                  // 序列号（消息顺序）
6
  "timestamp": 1726000000000,
7
  "data": { /* 业务数据 */ },
8
  "code": 0,                     // 状态码（响应消息用）
9
  "message": "ok"                // 错误信息
10
}
11

12
// 消息分类：
13
// - 请求消息：客户端主动发起（chat.send）
14
// - 响应消息：服务端回复请求（chat.send.ack）
15
// - 通知消息：服务端主动推送（chat.new_message）
16
// - 系统消息：心跳、错误、断线（ping/pong/error）
17

18
// 消息可靠性保证：
19
// 1. ACK 机制：客户端发消息后等待服务端 ACK，超时重发
20
// 2. 消息去重：服务端根据 msg_id 去重（Redis Set）
21
// 3. 顺序保证：seq 序列号 + 客户端排序
22
// 4. 断线补发：重连后带 last_seq，服务端补发缺失消息
23
// 5. 离线消息：用户上线后拉取离线队列
24

25
// 二进制 vs JSON：
26
// - JSON：可读性好，调试方便，体积稍大（大多数场景够用）
27
// - Protobuf：二进制协议，体积小 3-5 倍，需前后端约定 .proto
28
// - MessagePack：JSON 兼容的二进制格式
29
// - 高频/大数据场景（游戏、协同）推荐 Protobuf

1
# WebSocket 需要 Nginx 传递 Upgrade 头
2
location /ws/ {
3
    proxy_pass http://backend_ws;
4
    proxy_http_version 1.1;                    # 必须 1.1
5
    proxy_set_header Upgrade $http_upgrade;    # 关键
6
    proxy_set_header Connection "upgrade";     # 关键
7
    proxy_set_header Host $host;
8
    proxy_set_header X-Real-IP $remote_addr;
9

10
    # 超时（默认 60s 会断开长连接）
11
    proxy_read_timeout 3600s;
12
    proxy_send_timeout 3600s;
13

14
    # 关闭缓冲，实时转发
15
    proxy_buffering off;
16
}
17

18
# 负载均衡时的会话保持
19
# WebSocket 是长连接，同一用户的多次连接最好路由到同一台机器
20
upstream backend_ws {
21
    ip_hash;                                    # IP hash 保持
22
    server 192.168.1.1:8080;
23
    server 192.168.1.2:8080;
24
}
25

26
# 或者使用 sticky session（Nginx Plus / OpenResty）

1
Socket.IO 不是 WebSocket 协议，是基于 WebSocket 的封装库，
2
提供降级方案（长轮询、HTTP Streaming）。
3

4
优势：
5
1. 自动重连（内置）
6
2. 消息 ACK 回调
7
3. 房间（room）和命名空间（namespace）
8
4. 广播（broadcast to others）
9
5. 二进制数据自动分片
10
6. 断线消息缓冲
11
7. 多路传输降级：WebSocket → HTTP Long Polling → HTTP Streaming
12

13
代码对比：
14

15
原生 WebSocket：
16
ws.send(JSON.stringify({ type: 'chat', data: msg }));
17
ws.onmessage = e => { const { type, data } = JSON.parse(e.data); ... }
18

19
Socket.IO：
20
socket.emit('chat', msg, ackCallback);         // 事件 + ACK
21
socket.on('chat', (msg) => { ... });           // 直接监听事件名
22
socket.join('room-1');                         // 加入房间
23
socket.to('room-1').emit('chat', msg);         // 房间内广播
24

25
代价：
26
- 协议不兼容标准 WebSocket（服务端必须也是 Socket.IO）
27
- 包体积较大（60KB+ min）
28
- 需要额外的 sticky session 配置（多实例部署）
29

30
选型：
31
- 快速搭建、内部通信、房间功能多 → Socket.IO
32
- 与第三方标准 WebSocket 服务对接 → 原生 WebSocket
33
- 极致性能 / 二进制协议 → 原生 WebSocket + Protobuf

1
SSE：基于 HTTP 的服务器单向推送协议
2
- 客户端发起一次 HTTP 请求，服务端保持连接持续推送
3
- 协议：Content-Type: text/event-stream
4
- 单向：只能服务端 → 客户端
5

6
SSE vs WebSocket：
7

8
| 特性 | SSE | WebSocket |
9
|:--|:--|:--|
10
| 方向 | 单向（服务器推） | 双向 |
11
| 协议 | HTTP | 独立协议（Upgrade from HTTP）|
12
| 自动重连 | 浏览器内置 | 需自己实现 |
13
| 消息 ID/断点续传 | 内置（Last-Event-ID） | 需自己实现 |
14
| 二进制数据 | 不支持（Base64 转） | 支持 |
15
| 代理/防火墙穿透 | 好（就是 HTTP） | 可能被拦截 |
16
| 连接数限制 | HTTP/1.1 每域 6 个 | 无限制 |
17
| 浏览器支持 | 除 IE 全支持 | 全支持 |
18

19
适用场景：
20
- SSE：AI 流式响应（ChatGPT 打字机效果）、通知推送、日志流、股票行情
21
- WebSocket：聊天、协同编辑、多人游戏

1
// 前端使用
2
const es = new EventSource('/api/stream');
3

4
es.onopen = () => console.log('连接打开');
5
es.onmessage = (e) => {
6
  console.log('收到消息', e.data);
7
  // e.lastEventId 可用于断点续传
8
};
9
es.onerror = (e) => {
10
  // 浏览器会自动重连，一般不用手动处理
11
  console.log('错误', es.readyState);
12
};
13

14
// 监听自定义事件
15
es.addEventListener('user-message', (e) => {
16
  console.log(JSON.parse(e.data));
17
});
18

19
// 主动关闭
20
es.close();
21

22
// 服务端响应格式（Node.js Express 示例）
23
app.get('/api/stream', (req, res) => {
24
  res.writeHead(200, {
25
    'Content-Type': 'text/event-stream',
26
    'Cache-Control': 'no-cache',
27
    'Connection': 'keep-alive',
28
  });
29

30
  // 消息格式：event / data / id / retry
31
  res.write('event: message\n');
32
  res.write('data: hello\n\n');         // 两个换行结束一条消息
33

34
  // 定时推送
35
  const timer = setInterval(() => {
36
    res.write(`id: ${Date.now()}\n`);
37
    res.write(`data: ${JSON.stringify({ time: Date.now() })}\n\n`);
38
  }, 1000);
39

40
  req.on('close', () => clearInterval(timer));
41
});
42

43
// 局限：
44
// 1. 单域名 6 个连接（HTTP/1.1）→ HTTP/2 无此限制
45
// 2. 不支持自定义 header（认证要用 URL 参数或 Cookie）
46
// 3. 不支持二进制
47
// 4. IE 不支持

1
// 方案 A：SSE（推荐，最简单）
2
const es = new EventSource('/api/chat/stream?prompt=xxx');
3
es.onmessage = (e) => {
4
  if (e.data === '[DONE]') { es.close(); return; }
5
  const chunk = JSON.parse(e.data);
6
  output.value += chunk.content;   // 逐字追加
7
};
8

9
// 方案 B：fetch + ReadableStream（更灵活，可带 header）
10
async function streamChat(prompt, onChunk) {
11
  const res = await fetch('/api/chat', {
12
    method: 'POST',
13
    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
14
    body: JSON.stringify({ prompt, stream: true }),
15
  });
16

17
  const reader = res.body.getReader();
18
  const decoder = new TextDecoder();
19
  let buffer = '';
20

21
  while (true) {
22
    const { done, value } = await reader.read();
23
    if (done) break;
24

25
    buffer += decoder.decode(value, { stream: true });
26
    // 按 SSE 协议解析（每条消息以 \n\n 分隔）
27
    const lines = buffer.split('\n\n');
28
    buffer = lines.pop();          // 保留不完整的最后一段
29

30
    for (const line of lines) {
31
      const data = line.match(/^data: (.*)$/m)?.[1];
32
      if (!data || data === '[DONE]') continue;
33
      const chunk = JSON.parse(data);
34
      onChunk(chunk.content);
35
    }
36
  }
37
}
38

39
// 使用
40
streamChat('讲个笑话', (text) => { output.value += text; });
41

42
// OpenAI 官方 SDK 就是这么做的：
43
// 用 fetch + stream，兼容自定义 header 和 POST 请求体

1
WebRTC（Web Real-Time Communication）：
2
浏览器之间 P2P 实时通信，主要用于音视频、屏幕共享、大数据传输。
3

4
三大核心 API：
5
1. getUserMedia：获取摄像头/麦克风
6
2. RTCPeerConnection：P2P 连接管理
7
3. RTCDataChannel：P2P 数据传输
8

9
信令流程（需要中间服务器）：
10

11
      A                     Signaling Server              B
12
      │                            │                       │
13
      │─── 1. createOffer ────────>│                       │
14
      │                            │─── 2. offer ─────────>│
15
      │                            │                       │
16
      │                            │<── 3. answer ─────────│
17
      │<── 4. answer ──────────────│                       │
18
      │                            │                       │
19
      │─── 5. ICE candidate ──────>│─── ICE candidate ────>│
20
      │<── 6. ICE candidate ───────│<── ICE candidate ─────│
21
      │                            │                       │
22
      └──────────── P2P 连接建立（无需服务器） ────────────┘
23

24
关键概念：
25
- SDP（Session Description Protocol）：描述媒体能力
26
- ICE（Interactive Connectivity Establishment）：NAT 穿透
27
  - STUN 服务器：发现自己的公网 IP
28
  - TURN 服务器：NAT 打不通时中转
29
- DataChannel：基于 SCTP，可传输任意数据（文件、游戏状态）
30

31
WebRTC 优势：
32
- 直连（低延迟，200ms 内）
33
- 加密（DTLS-SRTP 强制）
34
- 节省服务器带宽（P2P 传输）

1
// 简化示例（获取本地流 + 建立连接）
2
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
3
video.srcObject = stream;
4

5
const pc = new RTCPeerConnection({
6
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
7
});
8

9
// 添加本地流
10
stream.getTracks().forEach(track => pc.addTrack(track, stream));
11

12
// 监听远端流
13
pc.ontrack = (e) => { remoteVideo.srcObject = e.streams[0]; };
14

15
// 创建 offer 并通过信令服务器发给对方
16
const offer = await pc.createOffer();
17
await pc.setLocalDescription(offer);
18
signalingServer.send({ type: 'offer', sdp: offer });

1
两大主流算法：
2

3
1. OT（Operational Transformation）
4
   - Google Docs 采用
5
   - 核心：将编辑操作抽象为 op（insert/delete/retain）
6
   - 冲突时通过 transform 函数转换 op，保证最终一致
7
   - 优点：成熟、性能好
8
   - 缺点：实现复杂，需要中央服务器协调
9

10
   例：
11
   文档 "abc"
12
   A 用户：insert(1, "X") → "aXbc"
13
   B 用户：insert(2, "Y") → "abYc"
14

15
   服务器收到 A 的 op 后转发给 B：
16
   B 需要 transform：insert(2, "Y") 变成 insert(3, "Y")
17
   最终双方都得到 "aXbYc"
18

19
2. CRDT（Conflict-free Replicated Data Type）
20
   - Figma、Notion、Yjs 采用
21
   - 核心：数据结构本身保证任意顺序合并都一致
22
   - 优点：无需中央协调，可离线编辑
23
   - 缺点：内存占用大（保留历史元数据）
24

25
   常见 CRDT 库：Yjs、Automerge、Diamond Types
26

27
前端实现（基于 Yjs）：

1
import * as Y from 'yjs';
2
import { WebsocketProvider } from 'y-websocket';
3
import { MonacoBinding } from 'y-monaco';
4

5
// 1. 创建共享文档
6
const ydoc = new Y.Doc();
7
const ytext = ydoc.getText('monaco');
8

9
// 2. WebSocket 同步
10
const provider = new WebsocketProvider('wss://yjs.example.com', 'room-id', ydoc);
11

12
// 3. 绑定到编辑器（Monaco / CodeMirror / ProseMirror / Slate）
13
const editor = monaco.editor.create(container, { value: ytext.toString() });
14
new MonacoBinding(ytext, editor.getModel(), new Set([editor]), provider.awareness);
15

16
// awareness 提供在线状态、光标位置
17
provider.awareness.setLocalStateField('user', { name: 'Tom', color: '#f00' });
18

19
// 现成方案：
20
// - 文档：语雀、飞书文档（自研 OT）
21
// - 白板：tldraw、Excalidraw（CRDT）
22
// - 代码：CodeSandbox、StackBlitz（Yjs + Monaco）
23
// - 设计：Figma（自研 CRDT-like 方案）

1
架构：
2

3
用户浏览器 ←WebSocket→ 网关层 ←→ 消息服务 ←Redis Pub/Sub→ 房间管理
4
                                    ↓
5
                                  存储（MongoDB / Kafka → 数仓）
6

7
关键设计点：
8

9
1. 房间模型
10
   - 每个直播间是一个 room，用户加入即订阅
11
   - Socket.IO：socket.join('room-123')
12
   - 广播：io.to('room-123').emit('danmu', msg)
13

14
2. 消息扩散策略
15
   - 小房间（<1000 人）：直接广播
16
   - 大房间（万人级）：分级扩散
17
     * 网关层缓存最新 N 条，新用户进来先推历史
18
     * 消息按用户 ID hash 分片，多机并行推送
19

20
3. 消息限流
21
   - 单用户发言频率限制（Redis 计数 + 滑动窗口）
22
   - 房间总消息 QPS 限制，超过丢弃或合并
23

24
4. 消息优先级
25
   - 系统公告 > 付费弹幕 > 普通弹幕
26
   - 高优先级消息不走限流
27

28
5. 消息展示优化
29
   - 前端渲染节流：合并 100ms 内的多条消息一次性插入 DOM
30
   - 弹幕轨道管理：避免重叠，计算可用轨道
31
   - 虚拟列表：只渲染可视区域弹幕
32

33
6. 掉线与重连
34
   - 前端重连后带 last_msg_id，服务端补发
35
   - 长时间掉线（>5min）只推最新消息，不补历史
36

37
7. 数据规模
38
   - 单房间消息数：万级/分钟
39
   - 存储：Kafka 缓冲 → MongoDB 分片存储
40
   - 冷热分离：7 天内热数据 Redis，历史归档
41

42
前端要点：
43
- 弹幕用 requestAnimationFrame 控制动画（transform 走 GPU）
44
- Canvas 绘制（>1000 弹幕时性能远好于 DOM）
45
- 敏感词过滤（前端本地 DFA 算法 + 后端二次校验）

1
IM 系统三大难题：不丢、不重、有序
2

3
1. 不丢消息
4
   客户端发送 → 服务端 ACK → 客户端标记已送达
5
   ┌──────┐        ┌──────┐        ┌──────┐
6
   │  A   │──send─>│Server│──push─>│  B   │
7
   │      │<──ACK──│      │<──ACK──│      │
8
   └──────┘        └──────┘        └──────┘
9

10
   - A 未收到 ACK：本地重发（相同 msg_id）
11
   - Server 未收到 B 的 ACK：写入离线队列，B 上线后拉取
12
   - 消息持久化：先落库再推送（防止服务端崩溃丢消息）
13

14
2. 不重复
15
   - 每条消息生成全局唯一 msg_id（雪花算法/UUID）
16
   - 服务端根据 msg_id 去重（Redis Set，TTL 24h）
17
   - 客户端本地缓存已收 msg_id，重复的丢弃
18

19
3. 有序
20
   - 服务端为每个会话生成递增 seq
21
   - 客户端按 seq 排序展示
22
   - 断线重连时带 last_seq，服务端补发 seq > last_seq 的消息
23

24
4. 已读回执
25
   - B 打开会话时上报 read_seq
26
   - 服务端将 read_seq 推送给 A，A 展示"已读"
27

28
5. 离线消息
29
   - 用户离线时消息写入 inbox（Redis List / MongoDB）
30
   - 用户上线时按 seq 拉取（分页）
31
   - 拉取完成后清空 inbox
32

33
6. 消息漫游
34
   - 多端同步：手机端发的消息，Web 端也要看到
35
   - 每个用户维护一份消息索引（不只是每个会话）