为什么大模型网站使用 SSE 而不是 WebSocket?

发布于:2025-03-13 ⋅ 阅读:(33) ⋅ 点赞:(0)

在大模型网站(如 ChatGPT、Claude、Gemini 等)中,前端通常使用 EventSource(Server-Sent Events, SSE) 来与后端对接,而不是 WebSocket。这是因为 SSE 更适合类似流式文本生成的场景。下面我们详细对比 SSE、WebSocket 和其他可选方案


1. SSE(Server-Sent Events,服务器发送事件)

特点:

  • 单向通信(服务器 → 客户端),适用于大模型输出流式文本的场景。
  • 基于 HTTP/1.1 及 EventSource API,兼容性较好,易于集成。
  • 自动重连,如果连接断开,浏览器会自动尝试重新连接。
  • 轻量级,开销小,适合传输文本数据。

缺点:

  • 只支持 服务器推送,客户端无法主动发送消息(需要用 AJAX/Fetch 结合)。
  • 同源策略 影响,跨域时需要 CORS 配置。
  • HTTP/2 之前,SSE 只能打开 6 个连接(浏览器限制),但在 HTTP/2 上可复用单连接,问题减小。

适用场景:

流式返回(如 ChatGPT 逐字输出)
✔ 服务器向前端持续推送数据(如股票行情、日志监控)


2. WebSocket

特点:

  • 全双工通信,客户端和服务器可以随时相互发送数据。
  • 基于 TCP,独立于 HTTP,但通常通过 HTTP/HTTPS 协商(ws://wss://)。
  • 低延迟,适用于高频交互(如实时聊天、游戏、协作编辑)。

缺点:

  • 连接管理复杂(心跳检测、断线重连、负载均衡较难)。
  • 代理/防火墙兼容性问题,某些企业网络可能会阻止 WebSocket。
  • 服务器资源占用更大,需要维护长连接,占用线程/内存。

适用场景:

双向实时交互(如在线协作、弹幕、游戏匹配)
低延迟高频数据更新(如金融交易、物联网)

为什么大模型网站不用 WebSocket?

  • WebSocket 适用于双向通信,而 大模型的输出是“流式”文本,客户端只需接收数据,WebSocket 的优势无法体现。
  • WebSocket 需要额外的 连接管理,而 SSE 依赖于现有的 HTTP 连接,更易集成。

3. HTTP 长轮询(Long Polling)

特点:

  • 客户端发送请求,服务器 保持连接不返回数据,直到有新数据才返回。
  • 客户端收到数据后立即发送新的请求,模拟流式通信。
  • 兼容性极好,所有 HTTP 服务器都支持。

缺点:

  • 请求开销大,每次返回数据后都需要重新建立 HTTP 连接,浪费资源。
  • 延迟较高,如果服务器没有数据,客户端必须定期请求,效率低。

4. gRPC(基于 HTTP/2 的流式通信)

特点:

  • 双向流式通信(客户端和服务器都可以持续发送数据)。
  • 基于 HTTP/2,性能较好,可在单个连接上多路复用请求。
  • 适用于微服务通信,比 REST API 更高效。

缺点:

  • 浏览器原生不支持,需要使用 gRPC-Web 代理转换。
  • 复杂度高,部署比 SSE/WebSocket 难。

总结:哪种方式适合大模型前端?

方案 是否适用于大模型流式返回? 特点 适用场景
SSE(EventSource) 最佳选择 服务器 → 客户端单向推送,轻量、自动重连 流式输出(ChatGPT)、实时通知
WebSocket ❌ 过度设计 双向通信,低延迟,复杂连接管理 聊天、游戏、协作编辑
长轮询(Long Polling) ❌ 开销大 兼容性强但效率低,每次数据返回后需重新请求 旧系统支持
gRPC(HTTP/2 流) ❌ 需要代理 双向流式,高性能,浏览器需 gRPC-Web 微服务、API 交互

📌 所以,SSE 是最佳选择

  1. 天然支持流式输出,非常适合 ChatGPT 这类逐字返回的内容。
  2. 轻量级、简单易用,只需 EventSource API,不需要额外的连接管理。
  3. 支持 HTTP/2,比 WebSocket 适合这类请求响应模式。

实际应用示例(基于 SSE 实现大模型流式输出)

前端代码(使用 SSE 监听服务器消息):

const eventSource = new EventSource('/chat/stream');  // 后端返回流式数据

eventSource.onmessage = (event) => {
  console.log('收到新消息:', event.data);
};

eventSource.onerror = () => {
  console.log('连接断开,尝试重连...');
  eventSource.close();
};

后端代码(Node.js 示例):

app.get('/chat/stream', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  let count = 0;
  const interval = setInterval(() => {
    res.write(`data: 你好,消息 ${count++}\n\n`);
    if (count > 5) {
      clearInterval(interval);
      res.end();
    }
  }, 1000);
});

结论

SSE 是 最适合大模型流式返回的方案,因为它:
轻量级
自动重连
支持 HTTP/2
适用于服务器单向推送

所以,大模型网站普遍使用 SSE,而不是 WebSocket! 🚀

网站截图

DeepSeek

请添加图片描述

ChatGPT请添加图片描述

Claude请添加图片描述

文心一言请添加图片描述

→ 以上 🐒