SSE与Websocket有什么区别？

SSE（Server-Sent Events）和WebSocket都能实现服务器与客户端的实时通信，但它们在协议设计、应用场景和技术特性上有明显差异。以下从多个维度对比两者的区别：

1. 协议基础

• SSE

  • 基于HTTP协议，是HTTP的扩展。
  • 使用单向通信模式：仅服务器→客户端。
  • 依赖长轮询（Long Polling）或持续HTTP连接实现实时性。

• WebSocket

  • 基于独立的WebSocket协议 （ws://或wss://），但握手阶段使用HTTP协议。
  • 支持全双工通信：服务器和客户端可同时互发消息。
  • 建立TCP持久连接，不依赖HTTP请求/响应循环。

2. 连接特性

特性	SSE	WebSocket
连接方向	单向（服务器→客户端）	双向（全双工）
连接建立	通过EventSource自动创建HTTP连接	通过WebSocket构造函数创建TCP连接
连接状态	依赖HTTP状态码（如200 OK）	有独立的状态码（如1000表示正常关闭）
自动重连	内置自动重连机制（readyState）	需要手动实现重连逻辑

3. 数据格式与编码

• SSE

  • 数据格式为文本流 ，使用text/event-stream MIME类型。

  • 消息格式固定为data: [消息内容]\n\n，支持id、event、retry等字段。

  • 示例：

    data: This is a message\n\n
    event: customEvent\n
    data: {"key": "value"}\n\n

• WebSocket

  • 支持二进制和文本数据，编码灵活（如JSON、Protobuf等）。

  • 需自行处理消息边界和解析逻辑。

  • 示例（JSON格式）：

    socket.send(JSON.stringify({ type: "update", data: "new data" }));

4. 性能与开销

维度	SSE	WebSocket
协议开销	基于HTTP，每次请求包含头部（约500-800字节）	二进制帧头部仅2-10字节
长连接开销	单个HTTP连接，开销较小	需维护独立TCP连接，开销略高
心跳机制	依赖HTTP Keep-Alive	需手动实现ping/pong机制
数据传输效率	文本格式，适合小数据量推送	二进制帧更高效，适合大数据量

5. 浏览器兼容性

• SSE

  • 主流浏览器（Chrome、Firefox、Safari、Edge）均支持，但IE不支持。
  • 兼容性可通过polyfill扩展。

• WebSocket

  • 现代浏览器（Chrome 4+、Firefox 4+、Safari 5+、Edge）均支持，**IE10+**支持。
  • 低版本浏览器需降级到轮询或使用WebSocket库（如Socket.IO）。

6. 应用场景

• SSE适用场景

  • 服务器主动推送数据，如实时通知、股票行情、新闻更新。
  • 只需要单向通信，且数据格式简单（如文本、JSON）。
  • 需依赖HTTP协议，如通过CDN或代理服务器访问。

• WebSocket适用场景

  • 双向实时通信，如聊天应用、多人游戏、协作编辑。
  • 高频率、低延迟的数据交互，如金融交易系统。
  • 需自定义消息格式或二进制数据传输（如视频流）。

7. 实现复杂度

• SSE

  • 前端：简单，使用EventSource API。
  • 后端：只需返回text/event-stream类型的响应，无需特殊协议处理。

• WebSocket

  • 前端：需处理连接状态、重连逻辑、消息解析。
  • 后端：需支持WebSocket协议（如Java的@ServerEndpoint、Node.js的ws库）。

总结对比表

特性	SSE	WebSocket
协议	HTTP	WebSocket
通信方向	单向（服务器→客户端）	双向（全双工）
数据格式	文本流（text/event-stream）	文本或二进制
自动重连	内置支持	需要手动实现
浏览器兼容性	现代浏览器（IE不支持）	现代浏览器（IE10+）
典型场景	实时通知、新闻推送	聊天、游戏、实时协作
协议开销	高（HTTP头部）	低（二进制帧）

如何选择？

• 选SSE：若只需单向推送、数据量小、依赖HTTP协议，且无需兼容IE。
• 选WebSocket：若需双向通信、低延迟、自定义消息格式，或需支持复杂交互场景。

例如，网站的实时通知系统适合用SSE，而在线游戏则更适合WebSocket。