SSE 与 WebSocket 实战对比与场景选择

概览SSE（Server-Sent Events）和 WebSocket 都用于实时通信：SSE 基于 HTTP 的 `text/event-stream`，天然支持服务端到客户端的单向推送、自动重连与事件分发。WebSocket 通过握手升级为持久连接，提供双向通信，适合需要客户端与服务端频繁交互的场景。场景对比仅需要服务端推送（行情、通知、日志流）：优先 SSE。需要双向交互（协作编辑、在线对战、IM）：优先 WebSocket。受代理和基础设施限制（只允许 HTTP/HTTPS）：SSE 兼容性更好。需要移动端与低功耗场景：根据交互需求选择，尽量减少心跳与消息体积。关键特性SSE：传输通道：HTTP/1.1 或更高版本，`Content-Type: text/event-stream`。连接管理：浏览器自动重连；支持 `Last-Event-ID` 续传。消息模型：事件名 + 数据文本；天然支持 CORS 与代理。WebSocket：传输通道：初始 HTTP 握手后升级为 WebSocket（持久双向）。连接管理：需自定义心跳与重连策略。消息模型：文本或二进制帧，适合高频、双向、低延迟交互。代码示例SSE（浏览器）：<script> const es = new EventSource('/events'); es.addEventListener('message', (e) => { const data = JSON.parse(e.data); console.log('SSE message:', data); }); es.addEventListener('custom', (e) => { console.log('Custom event:', e.data); }); es.onerror = () => console.warn('SSE disconnected, will auto-reconnect'); </script> WebSocket（浏览器）：const ws = new WebSocket('wss://example.com/ws'); ws.onopen = () => ws.send(JSON.stringify({ type: 'ping' })); ws.onmessage = (e) => { const msg = JSON.parse(e.data); console.log('WS message:', msg); }; ws.onclose = () => console.warn('WS closed, implement exponential backoff reconnect'); 落地建议SSE：后端返回 `Cache-Control: no-cache`，按需设置 `retry`；对长连接做连接数与速率限制。WebSocket：实现心跳（如 `ping/pong`）、指数退避重连与消息序列化；考虑负载均衡与粘性会话。监控：记录连接时长、重连次数、消息延迟与丢包率；前后端统一超时与重试策略。兼容性与基础设施浏览器兼容：现代浏览器普遍支持 SSE 与 WebSocket；旧版 IE 不支持原生 SSE，可用 polyfill 或降级为轮询。代理与 CDN：SSE 走标准 HTTP 通道，通常更易穿透；WebSocket 需确认代理与 CDN 的升级支持与闲置超时配置。结论选择依据交互方向与基础设施限制：单向推送选 SSE，双向交互选 WebSocket。两者可在复杂系统中并存，按域划分职责以获得最优的稳定性与成本。