SSE vs WebSocket 对比

特性 SSE WebSocket
方向 服务端->客户端 双向
复杂度 简单，基于http 较复杂，独立协议
适用场景 消息推送/流式输出 聊天，游戏，高屏交互

SSE用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 前端使用 EventSource
const eventSource = new EventSource("/api/stream");

// 监听消息
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log("收到推送:", data);
};

// 监听自定义事件（如果服务端设置了 event 字段）
eventSource.addEventListener("notification", (event) => {
  console.log("新通知:", event.data);
});

// 错误处理（浏览器会自动重连）
eventSource.onerror = () => {
  console.log("连接异常，浏览器会自动重连");
};

webSocket用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// 1. 创建连接
const ws = new WebSocket("ws://localhost:3000"); // ws:// 非加密，wss:// 加密

// 2. 连接打开
ws.onopen = () => {
  console.log("✅ WebSocket 连接已建立");

  // 发送消息
  ws.send(
    JSON.stringify({
      type: "message",
      content: "Hello Server!",
    }),
  );
};

// 3. 接收消息
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log("📨 收到服务端消息:", data);

  // 处理不同类型消息
  switch (data.type) {
    case "pong":
      console.log("心跳响应");
      break;
    case "notification":
      console.log("通知:", data.content);
      break;
    default:
      console.log("普通消息:", data);
  }
};

// 4. 错误处理
ws.onerror = (error) => {
  console.error("❌ WebSocket 错误:", error);
};

// 5. 连接关闭
ws.onclose = (event) => {
  console.log("🔌 WebSocket 连接已关闭", event.code, event.reason);
  // 尝试重连...
};

// 6. 主动关闭连接
// ws.close(1000, '正常关闭');

心跳机制

心跳机制是一种用于保活和探测连接状态的技术。前端通过websocket或长轮训场景因为中间网络设备（如网关）会长时间没有数据交互的闲置连接，导致“假死”的状态。

解决：前端定期发送ping数据，服务器返回pong，如连接多次无响应，前端判定连接已断开，主动执行重连。