WebSocket 与 SSE 对比：即时通信的选择（一）

在现代 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 组件自带断线重连功能。

适用场景

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

示意图： [SSE 数据交互示意图]

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!')}\n\n"

@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 更合适。