流式传输中 SSE 与 WebSocket 的区别

流式传输中 SSE 与 WebSocket 的区别

核心区别总结

​特性 ​SSE ​WebSocket
​传输方向 单向（服务器 → 客户端） 双向（客户端 ↔ 服务器）
​协议基础 基于 HTTP（长连接） 基于 TCP（独立协议 ws:///wss://）
​数据格式 仅文本（UTF-8） 支持文本和二进制数据
​延迟 较高（依赖 HTTP 机制） 极低（全双工通信）
​适用场景 服务器主动推送的流式数据 双向交互的实时流式传输

1. 流式传输中的角色

  • ​SSE

    • ​定位：专为单向服务器推送设计。
    • ​典型场景：
      • 实时日志流（服务器监控）。
      • 金融市场行情（股票价格）。
      • 传感器数据推送（温度、GPS）。

  • ​WebSocket

    • ​定位：支持双向实时通信。
    • ​典型场景：
      • 实时音视频流（结合 WebRTC）。
      • 多人协作应用（文档协同编辑）。
      • 在线游戏（玩家状态同步）。

2. 技术实现差异

​维度 ​SSE ​WebSocket
​协议机制 基于 HTTP 长连接，使用 text/event-stream 格式。 基于 TCP，需通过 HTTP 协议升级握手。
​数据格式 仅文本（JSON/CSV），二进制需编码（Base64）。 支持文本和二进制（如音视频帧）。
​连接管理 自动重连，标头开销低。 需手动处理心跳检测和重连。

3. 性能与限制

​维度 ​SSE ​WebSocket
​延迟 较高（HTTP 缓冲影响）。 极低（直接 TCP 通道）。
​带宽效率 低（文本无压缩）。 高（支持二进制压缩）。
​兼容性 不支持 IE/旧版 Edge。 广泛支持（现代浏览器）。
​开发复杂度 低（无需处理协议细节）。 高（需管理连接状态）。

4. 选择建议

  • ​使用 SSE 的场景：

    • 单向文本流（如实时通知）。
    • 快速实现（代码示例）：
      1
      2
      3
      4
      5
      6
      7
      // Node.js + Express
      app.get("/stream", (req, res) => {
        res.setHeader("Content-Type", "text/event-stream");
        setInterval(() => {
          res.write(`data: ${JSON.stringify({ value: Math.random() })}\n\n`);
        }, 1000);
      });

  • ​使用 WebSocket 的场景：

    • 双向交互或二进制流（如音视频通话）。

    • 代码示例（二进制传输）：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      // 客户端发送二进制数据
      const buffer = new ArrayBuffer(1024);
      socket.send(buffer);

      // 服务端接收（Node.js + ws库）
      ws.on("message", (data) => {
        if (data instanceof Buffer) {
          // 处理二进制数据
        }
      });

5. 混合使用场景

  • ​SSE + HTTP API：

    • 用 SSE 推送数据流，HTTP 处理客户端操作（如股票行情系统）。

  • ​WebSocket 独立通道：

    • 全双工流式传输（如视频会议信令）。

总结

  • ​SSE：轻量、单向，适合服务器推送文本流。
  • ​WebSocket：双向、低延迟，适合交互性场景。