Server-Sent Events (SSE) 和 WebSocket 都是用于实现服务器与客户端实时通信的技术,但它们在设计目标、协议特性和适用场景上有显著区别。以下是两者的详细对比:
一、核心区别总结
对比维度 | SSE (Server-Sent Events) | WebSocket |
---|---|---|
通信方向 | 单向(服务器 → 客户端) | 全双工(服务器 ↔ 客户端) |
协议基础 | 基于HTTP | 独立协议(ws:// 或 wss:// ) |
数据格式 | 纯文本(事件流格式) | 二进制或文本 |
自动重连 | 内置支持 | 需手动实现 |
浏览器兼容性 | 除IE外主流浏览器支持 | 所有现代浏览器支持 |
适用场景 | 服务器向客户端推送实时数据(如股票行情、新闻) | 双向交互场景(如聊天、游戏、协同编辑) |
二、技术细节对比
1. 连接建立
-
SSE:
// 客户端代码 const eventSource = new EventSource("/sse-endpoint"); eventSource.onmessage = (e) => console.log(e.data);
- 使用标准HTTP请求,头部包含:
Accept: text/event-stream Cache-Control: no-cache Connection: keep-alive
- 使用标准HTTP请求,头部包含:
-
WebSocket:
// 客户端代码 const socket = new WebSocket("ws://example.com/ws"); socket.onmessage = (e) => console.log(e.data);
- 通过HTTP Upgrade切换协议:
GET /ws HTTP/1.1 Upgrade: websocket Connection: Upgrade
- 通过HTTP Upgrade切换协议:
2. 数据传输
-
SSE:
- 服务器响应格式:
event: priceUpdate data: {"symbol":"AAPL","price":182.73} \n\n
- 支持事件类型(
event
字段)和重试时间(retry
字段)
- 服务器响应格式:
-
WebSocket:
- 二进制或文本帧自由传输:
// 发送文本 socket.send("Hello Server!"); // 发送二进制数据(如文件) socket.send(arrayBuffer);
- 二进制或文本帧自由传输:
3. 连接维护
特性 | SSE | WebSocket |
---|---|---|
心跳检测 | 依赖HTTP长连接 | 需手动实现Ping/Pong帧 |
断线重连 | 自动(客户端默认3秒重试) | 需手动重连 |
连接状态管理 | 简单(HTTP状态码控制) | 复杂(需处理多种帧类型) |
三、选择建议
使用SSE的场景 ✅
-
服务器单向推送
- 实时监控(服务器指标、日志流)
- 新闻/股票行情推送
- 长轮询替代方案
-
需要简单实现
- 无需额外协议,复用HTTP基础设施
- 自动重连和事件ID支持
-
文本数据为主
- 结构化数据(JSON)传输
使用WebSocket的场景 ✅
-
双向交互需求
- 在线聊天室
- 多人在线游戏
- 实时协作编辑
-
低延迟通信
- 高频双向数据交换(如视频会议信令)
-
二进制数据传输
- 文件传输、音视频流
四、代码示例对比
SSE实现(Spring Boot)
@GetMapping("/sse")
public SseEmitter streamData() {
SseEmitter emitter = new SseEmitter();
executor.execute(() -> {
try {
for (int i = 0; i < 10>
WebSocket实现(Spring Boot)
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(myHandler(), "/ws")
.setAllowedOrigins("*");
}
@Bean
public WebSocketHandler myHandler() {
return new TextWebSocketHandler() {
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) {
// 处理客户端消息
session.sendMessage(new TextMessage("ECHO: " + message.getPayload()));
}
};
}
}
五、性能与资源消耗
指标 | SSE | WebSocket |
---|---|---|
连接开销 | 较高(HTTP头重复传输) | 低(连接后无额外开销) |
服务器内存占用 | 每个连接独立线程/连接 | 更高效的连接管理 |
适合连接数 | 适合中低并发(数千连接) | 适合高并发(数万连接) |
六、兼容性解决方案
当需要兼容老旧浏览器时:
- SSE降级方案:使用长轮询(Long Polling)
- WebSocket降级方案:使用SockJS库
const sock = new SockJS('/ws-endpoint'); sock.onmessage = (e) => console.log(e.data);
总结
- SSE是简单、单向实时通信的理想选择,尤其适合已有HTTP架构的项目。
- WebSocket在需要双向、低延迟交互时不可或缺,但实现复杂度更高。
根据你的应用场景选择:
- 只需接收服务器更新? → 用SSE
- 需要双向对话? → 用WebSocket