文章目录
- 前言
- 一、基本概念
- 1. Server-Sent Events (SSE)
- 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-streamMIME 类型。 - 客户端通过
EventSourceAPI 接收数据。 - 自动重连、支持事件 ID、简单易用。
✅ 适用于：新闻推送、股票行情、日志流、通知等只读实时更新场景。
2. WebSocket
- 基于独立的 WebSocket 协议（ws:// 或 wss://）。
- 全双工、双向通信：客户端和服务器可随时互相发送消息。
- 建立连接需通过 HTTP 协议“升级”（Upgrade: websocket）。
- 使用
WebSocketJavaScript 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（客户端）
consteventSource=newEventSource('/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（客户端）
constws=newWebSocket('wss://example.com/chat');ws.onopen=()=>{ws.send(JSON.stringify({type:'join',room:'lobby'}));};ws.onmessage=(event)=>{constmsg=JSON.parse(event.data);console.log('收到:',msg);};ws.onclose=()=>console.log('连接关闭');服务器（伪代码）：
# 接收客户端消息并广播给其他用户asyncdefhandle_websocket(websocket,path):asyncformessageinwebsocket:awaitbroadcast(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。
本文的引用仅限自我学习如有侵权，请联系作者删除。
参考知识
