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

SSE与WebSocket：实时通信技术对比与应用指南

news 2026/8/8 3:03:22

1. 从轮询到长连接：实时通信的技术演进

十年前我刚接触Web开发时，实现实时数据更新只能靠Ajax轮询。记得当时为了做一个简单的在线聊天室，不得不用setInterval每隔3秒请求一次服务器，既浪费带宽又导致消息延迟。直到后来遇到SSE和WebSocket这两种真正的实时通信方案，才发现原来技术已经发展到如此程度。

SSE（Server-Sent Events）和WebSocket都是现代Web实时通信的核心技术，但设计理念和适用场景截然不同。SSE像是电视台的新闻直播——服务器单向推送最新消息给浏览器；而WebSocket则更像电话通话——建立连接后双方可以自由对话。理解它们的区别，就像厨师要分清炒锅和汤锅的用途一样重要。

2. 协议层深度对比：SSE与WebSocket的基因差异

2.1 基础通信模型

SSE基于HTTP协议，本质上是一种长轮询的进化形态。它利用标准的HTTP连接，通过Content-Type: text/event-stream头信息建立持久连接。浏览器通过EventSource API接收服务器推送的事件流：

const source = new EventSource('/updates'); source.onmessage = (event) => { console.log('新消息:', event.data); };

WebSocket则是独立的二进制协议，通过HTTP升级握手（状态码101）后转为全双工通信。在Spring Boot中建立WebSocket服务端的典型配置：

@Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(myHandler(), "/chat"); } @Bean public WebSocketHandler myHandler() { return new MyWebSocketHandler(); } }

2.2 消息传输特性对比

特性	SSE	WebSocket
通信方向	单向（服务器→客户端）	双向全双工
协议基础	HTTP/HTTPS	独立协议（ws/wss）
数据格式	UTF-8文本（事件流格式）	二进制或文本
默认重连机制	内置自动重连	需手动实现
跨域支持	同源策略	不受同源限制
头部开销	每次通信含HTTP头	建立后仅2-10字节帧头

实际项目中，SSE的消息延迟通常在100-300ms，而WebSocket可以做到50ms以下。但在带宽利用率上，SSE的HTTP头开销会导致高频小消息场景下多消耗30%-50%流量

3. 实战场景选择指南

3.1 典型SSE适用场景

股票行情推送是最能体现SSE优势的场景之一。某证券App的实践表明，使用SSE后服务器负载降低40%：

# Python Flask实现的SSE服务端 @app.route('/stock') def stream_stocks(): def generate(): while True: data = get_updated_stocks() yield f"data: {json.dumps(data)}\n\n" time.sleep(1) return Response(generate(), mimetype='text/event-stream')

其他SSE的理想场景包括：

新闻/社交媒体实时更新
服务器日志监控仪表盘
长任务进度通知（如文件导出）
电商订单状态变更推送

3.2 WebSocket的杀手级应用

在线协作白板对延迟极其敏感，必须使用WebSocket。通过二进制传输绘图指令：

// 前端发送绘图数据 canvas.addEventListener('mousemove', (e) => { if (isDrawing) { const msg = { type: 'draw', x: e.offsetX, y: e.offsetY, color: currentColor }; websocket.send(JSON.stringify(msg)); } });

以下情况请优先考虑WebSocket：

多人在线游戏
实时音视频聊天
金融交易指令传输
物联网设备双向控制

4. 深度技术细节解析

4.1 SSE的事件流规范

标准SSE消息包含若干字段：

event: priceUpdate\n id: 12345\n retry: 5000\n data: {"symbol":"AAPL","price":182.73}\n\n

event: 自定义事件类型，对应前端addEventListener
id: 消息ID，断线重连时通过Last-Event-ID头发送
retry: 重连间隔（毫秒）
data: 可跨多行的有效载荷，最终会合并

4.2 WebSocket的帧结构

WebSocket协议最小传输单元是帧（Frame），关键控制位包括：

FIN：标记是否为消息最后一帧
RSV1-3：扩展用途
Opcode：帧类型（0x1文本，0x2二进制等）
Mask：是否掩码（客户端→服务端必须掩码）
Payload length：数据长度（7/7+16/7+64位）

使用Chrome开发者工具可以捕获到原始帧数据：

Opcode: 1 (Text) Masked: true Payload length: 23 Masking key: 5a 3d fc 11 Payload: 48 65 6c 6c 6f 20 57 65 62 53 6f 63 6b 65 74 21

5. 生产环境中的坑与解决方案

5.1 SSE的常见问题

连接数限制：浏览器对同一域名通常有6个HTTP连接限制。解决方法：

使用HTTP/2多路复用
重要频道单独域名
合并多个事件流

代理服务器问题：某些代理会缓冲SSE流。应对策略：

配置X-Accel-Buffering: no响应头
定期发送注释行（:keepalive\n\n）
改用WebSocket

5.2 WebSocket的稳定性保障

心跳机制：防止中间设备断开空闲连接

// 前端心跳示例 setInterval(() => { if (ws.readyState === WebSocket.OPEN) { ws.send('ping'); } }, 30000);

断线重连：需要处理各种异常状态

// Spring Boot重连逻辑 @OnWebSocketClose public void onClose(int statusCode, String reason) { if (statusCode != 1000) { // 非正常关闭 ScheduledExecutorService scheduler = Executors.newSingleThreadScheduledExecutor(); scheduler.scheduleAtFixedRate(this::reconnect, 0, 10, TimeUnit.SECONDS); } }

6. 现代开发栈中的集成实践

6.1 Spring Boot双协议支持

通过配置同时支持两种协议：

@RestController @RequestMapping("/api") public class ComboController { @GetMapping(path = "/stream", produces = "text/event-stream") public Flux<String> sseStream() { return Flux.interval(Duration.ofSeconds(1)) .map(seq -> "data: " + LocalTime.now() + "\n\n"); } @MessageMapping("/chat") @SendTo("/topic/messages") public String handleWebSocket(String message) { return "[" + LocalTime.now() + "] " + message; } }

6.2 前端混合应用模式

根据功能需求选择协议：

function initRealtime() { // 状态通知用SSE const eventSource = new EventSource('/notifications'); // 聊天室用WebSocket const socket = new WebSocket('wss://api.example.com/chat'); // 优雅降级逻辑 if (!window.WebSocket) { fallbackToPolling(); } }

在测试工具方面，Apifox新建WebSocket连接时要注意：