当前位置：首页 > news >正文

15. 实时数据- SSE VS WebSocket

news 2026/7/8 20:49:19

文章目录

前言
一、基本概念
- 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	双向、支持二进制、低延迟	复杂、需管理连接、防火墙可能拦截