15. 实时数据- SSE VS WebSocket

文章目录

• 前言
• 一、基本概念
• • [1. Server-Sent Events (SSE)](#1. Server-Sent Events (SSE))
  • [2. WebSocket](#2. WebSocket)
• 二、核心对比
• 三、代码示例
• • SSE（客户端）
  • WebSocket（客户端）
  • 四、如何选择？
  • 五、常见误区
  • 六、总结

---

前言

SSE VS WebSocket‌

Server-Sent Events（SSE） 和 WebSocket 都是用于实现 服务器向客户端推送数据 的 Web 通信技术，但它们在协议、能力、适用场景等方面有显著区别。

---

一、基本概念

1. Server-Sent Events (SSE)

• 基于 HTTP/1.1 或 HTTP/2 的单向通信协议。
• 服务器 → 客户端 的 单向实时推送。
• 使用标准的 text/event-stream MIME 类型。
• 客户端通过 EventSource API 接收数据。
• 自动重连、支持事件 ID、简单易用。

✅ 适用于：新闻推送、股票行情、日志流、通知等 只读实时更新 场景。

2. WebSocket

• 基于 独立的 WebSocket 协议（ws:// 或 wss://）。
• 全双工、双向通信：客户端和服务器可随时互相发送消息。
• 建立连接需通过 HTTP 协议"升级"（Upgrade: websocket）。
• 使用 WebSocket JavaScript API。
• 无内置重连机制，需自行实现。

✅ 适用于：聊天应用、在线游戏、协同编辑、实时交易系统等 需要双向交互 的场景。

---

二、核心对比

特性	Server-Sent Events (SSE)	WebSocket
通信方向	单向（服务器 → 客户端）	双向（全双工）
协议基础	HTTP/HTTPS	独立的 WebSocket 协议（基于 TCP）
浏览器支持	广泛（除 IE）	广泛（IE10+）
数据格式	文本（通常是 UTF-8）	文本或二进制
自动重连	✅ 内置（可配置）	❌ 需手动实现
消息类型	支持自定义事件类型（event: 字段）	所有消息统一处理
跨域支持	受 CORS 控制（标准 HTTP 行为）	握手阶段受 CORS 控制
代理/防火墙兼容性	✅ 极好（走标准 HTTP 端口）	⚠️ 某些企业防火墙可能阻断非 HTTP 流量
开销	轻量（复用 HTTP 连接）	初始握手稍重，但后续高效
安全性	支持 HTTPS（即 SSE over TLS）	支持 WSS（WebSocket Secure）

---

三、代码示例

SSE（客户端）

const eventSource = new EventSource('/events');

eventSource.onmessage = function(event) {
  console.log('收到消息:', event.data);
};

eventSource.addEventListener('price-update', function(event) {
  console.log('价格更新:', event.data);
});

// 自动重连（默认每3秒，可通过服务器返回 retry: 指令调整）

服务器响应（Node.js 示例）：

HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

data: {"time": "2025-12-16T11:30:00Z"}

event: price-update
data: {"symbol": "AAPL", "price": 192.34}

---

WebSocket（客户端）

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

ws.onopen = () => {
  ws.send(JSON.stringify({ type: 'join', room: 'lobby' }));
};

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  console.log('收到:', msg);
};

ws.onclose = () => console.log('连接关闭');

服务器（伪代码）：

# 接收客户端消息并广播给其他用户
async def handle_websocket(websocket, path):
    async for message in websocket:
        await broadcast(message)

---

四、如何选择？

场景	推荐技术
仅需服务器推送更新（如通知、监控）	✅ SSE（更简单、省资源）
需要客户端频繁发消息给服务器（如聊天、游戏）	✅ WebSocket
需要传输二进制数据（如音视频、文件）	✅ WebSocket
部署环境限制只能用 HTTP(S) 端口	✅ SSE（兼容性更好）
已使用 HTTP/2，希望复用连接	✅ SSE over HTTP/2（多路复用更高效）

💡 小技巧：即使使用 WebSocket，也可以用 SSE 作为降级方案（例如在不支持 WebSocket 的旧设备上）。

---

五、常见误区

• ❌ "SSE 是过时的技术" → 错！SSE 在现代 Web 应用中依然非常实用，尤其在 Serverless / HTTP-first 架构中。
• ❌ "WebSocket 总是比 SSE 快" → 不一定。对于只读流，SSE 开销更低，且天然支持 HTTP 缓存、压缩、认证等。
• ❌ "SSE 不能传 JSON" → 可以！event.data 是字符串，通常就是 JSON。

---

六、总结

技术	优势	局限
SSE	简单、自动重连、HTTP 原生、低开销	单向、仅文本、不支持 IE
WebSocket	双向、支持二进制、低延迟	复杂、需管理连接、防火墙可能拦截

🎯 原则：

• 如果你只需要"服务器告诉客户端发生了什么" → 选 SSE。
• 如果你需要"客户端和服务器随时对话" → 选 WebSocket。

---

本文的引用仅限自我学习如有侵权，请联系作者删除。
参考知识
<>

---