WebSocket vs SSE：现代 Web 实时通信技术对比分析（一）

WebSocket vs SSE：现代 Web 实时通信技术对比分析

在现代 Web 开发中，实时通信需求越来越多，比如聊天应用、实时通知、直播弹幕、股票行情推送等。实现这些需求的常见技术有 WebSocket 和 SSE（Server-Sent Events），但它们各有优缺点，适用于不同的场景。

本文将详细介绍 WebSocket 和 SSE，并进行对比分析，帮助你选择合适的技术方案。

---

1. WebSocket 介绍

WebSocket 是 HTML5 引入的全双工通信协议，允许客户端和服务器之间保持持久连接，实现低延迟的双向通信。

WebSocket 特点

• ✅ 全双工通信：客户端和服务器都可以主动发送数据。
• ✅ 低延迟：连接建立后，数据交换无需额外的 HTTP 头部，提高通信效率。
• ✅ 支持二进制数据：可以发送文本（JSON）和二进制数据（Blob、ArrayBuffer）。
• ✅ 需要握手：使用 HTTP 进行 Upgrade: websocket 协商，建立 WebSocket 连接。
  

适用场景

在线聊天应用（如 IM）
实时游戏（如在线对战）
股票行情推送
直播弹幕

---

2. SSE（Server-Sent Events）介绍

SSE 是基于 HTTP 的服务器推送技术，允许服务器主动向客户端发送数据，但客户端无法主动向服务器发送消息。

SSE 特点

• ✅ 单向通信：仅服务器可以推送数据，客户端不能主动发送。
• ✅ 基于 HTTP/1.1 长连接：使用 EventSource 监听服务器的推送数据。
• ✅ 仅支持文本传输：只能传输 UTF-8 编码的文本，不支持二进制数据。
• ✅ 自动重连：浏览器的 EventSource 组件自带断线重连功能。

适用场景

新闻或社交媒体的实时更新
服务器通知推送（如系统消息）
监控数据流（如服务器日志监控）

---

3. WebSocket 与 SSE 对比

特性	WebSocket	SSE（Server-Sent Events）
通信模式	双向通信	单向（服务器 → 客户端）
协议	独立协议（ws/wss）	HTTP（基于 HTTP/1.1 长连接）
数据格式	文本 & 二进制	仅支持文本（UTF-8）
连接方式	需升级 HTTP 连接	直接使用 HTTP 长连接
自动重连	需要手动实现	EventSource 自带重连
浏览器支持	现代浏览器都支持	现代浏览器支持（IE 不支持）
适用场景	聊天、游戏、实时数据同步	新闻推送、状态更新

---

4. 选择 WebSocket 还是 SSE？

• ✅ 需要 双向通信（如聊天、多人协作、游戏）：选择 WebSocket
• ✅ 仅需 服务器推送数据（如新闻推送、日志监控）：选择 SSE
• ✅ 需要传输 二进制数据：选择 WebSocket
• ✅ 希望 自动重连 且不想手动管理连接：选择 SSE

---

5. WebSocket 和 SSE 代码示例

WebSocket 示例

服务器（FastAPI + WebSocket）

from fastapi import FastAPI, WebSocket

app = FastAPI()

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    while True:
        data = await websocket.receive_text()
        await websocket.send_text(f"你发送了: {data}")

客户端（JavaScript）

const socket = new WebSocket("ws://localhost:8000/ws");

socket.onopen = () => {
    console.log("WebSocket 连接已建立");
    socket.send("Hello Server");
};

socket.onmessage = (event) => {
    console.log("收到消息: ", event.data);
};

---

SSE 示例

服务器（FastAPI + SSE）

from fastapi import FastAPI
from starlette.responses import StreamingResponse
import asyncio

app = FastAPI()

async def event_generator():
    while True:
        yield f"data: {await asyncio.sleep(1, result='Hello, SSE!')}

"

@app.get("/events")
async def sse_endpoint():
    return StreamingResponse(event_generator(), media_type="text/event-stream")

客户端（JavaScript）

const eventSource = new EventSource("http://localhost:8000/events");

eventSource.onmessage = (event) => {
    console.log("收到推送: ", event.data);
};

eventSource.onerror = () => {
    console.log("SSE 连接异常");
};

---

6. 总结

• WebSocket 更强大，适用于需要双向实时交互的场景，但需要额外的连接管理。
• SSE 更简单，适用于服务器单向推送的场景，且支持自动重连，但不支持二进制数据。

如果你的应用需要实时通信，并且只需要服务器推送数据，SSE 是更简单的选择。但如果你需要双向交互或二进制数据支持，WebSocket 更合适。