Likanug // lab
返回文章列表

文章

技术分享

WebSocket与Http的SSE该怎么选择

#消息推送#网络协议#http#WebSocket
目录
  1. 1️⃣ WebSocket 与 SSE 的核心区别
  2. 2️⃣ 使用场景对比
  3. 🔹 WebSocket 适合：
  4. 🔹 SSE 适合：
  5. 3️⃣ 如何选择
  6. 4️⃣ 实际选择示例
  7. 🔹 额外提示

1️⃣ WebSocket 与 SSE 的核心区别#

特性WebSocketSSE (Server-Sent Events)
协议ws:// / wss://（独立协议，需要 HTTP 升级）http:// / https://（基于 HTTP）
通信方向双向（客户端 ↔ 服务端）单向（服务端 → 客户端）
连接管理长连接，需要手动心跳、处理断线重连长连接，浏览器自动重连
消息格式文本 / 二进制文本（UTF-8），可 JSON 序列化
浏览器支持所有主流浏览器所有主流浏览器（IE10+），移动端支持良好
性能高吞吐量，可处理复杂消息交互低延迟，单向推送场景性能足够
实现复杂度较高，需要维护连接、并发、广播等简单，只需循环写入流即可

2️⃣ 使用场景对比#

🔹 WebSocket 适合：#

  1. 双向通信场景：
    • 聊天应用
    • 游戏实时交互
    • 遥控 / 命令下发
    • 协同编辑（如 Google Docs）
  2. 高频、低延迟、二进制数据：
    • 视频流、音频流
    • 实时交易、行情推送（尤其有大量客户端需要双向交互）
  3. 复杂客户端管理：
    • 多客户端广播、房间分组
    • 需要服务端主动接收客户端请求并作出响应

🔹 SSE 适合：#

  1. 单向实时数据推送：
    • 监控仪表盘
    • 日志、告警、传感器数据流
    • 股票行情或温湿度图表
  2. 客户端不需要频繁发送数据：
    • 前端仅订阅数据，无交互指令
  3. 简单、稳定、轻量级：
    • 浏览器自动断线重连
    • 不需要维护心跳和复杂 actor/session
  4. HTTP/HTTPS 原生即可：
    • 方便部署在 Nginx / CDN / Cloudflare
    • 支持跨域（CORS）更容易

3️⃣ 如何选择#

维度建议
是否需要客户端发消息给服务端？✅ 需要 → WebSocket；❌ 不需要 → SSE
是否需要二进制数据流？✅ WebSocket；❌ SSE
客户端数量 & 扩展性SSE 对浏览器端大量订阅非常方便；WebSocket 对大规模广播需自己维护连接池
实现复杂度SSE 简单、无需心跳；WebSocket 复杂，需要维护连接、断线重连等
网络环境 & 代理SSE 基于 HTTP，更容易穿透代理、防火墙；WebSocket 需要特殊配置

核心结论：

  • 数据可视化 / 仪表盘 / 实时监控 → SSE 足够、轻量、稳定。
  • 双向交互 / 游戏 / 聊天 / 高频交易 → WebSocket 必须。

4️⃣ 实际选择示例#

场景技术选择说明
传感器实时温湿度推送SSE前端只订阅数据，不发消息
实时股票行情（前端下单）WebSocket前端既接收行情也发送交易指令
日志/告警监控面板SSE单向流，浏览器自动重连
聊天应用WebSocket双向消息交互，低延迟
远程控制设备WebSocket双向通信，服务端下发指令

🔹 额外提示#

  1. SSE 浏览器端限制：
    • IE10+ 支持，旧浏览器需 polyfill；
    • 单域名同时打开的 SSE 连接数有限制（通常浏览器并发 6~8 个）。
  2. WebSocket 可通过代理：
    • Nginx 需要配置 proxy_http_version 1.1 和 Upgrade；
    • Cloudflare 支持 WebSocket，但免费版有限制。
  3. 性能：
    • SSE 是文本流，性能足够可视化用途；
    • WebSocket 更高吞吐量，适合高频双向场景。

💡 总结一句话：

如果你的目标是实时数据可视化，前端只需要接收数据 → 用 SSE 就够了； 如果需要双向通信或复杂交互 → WebSocket 才是必须的。