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

news2025/3/12 13:12:12

在大模型网站（如 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 是最佳选择：

天然支持流式输出，非常适合 ChatGPT 这类逐字返回的内容。
轻量级、简单易用，只需 EventSource API，不需要额外的连接管理。
支持 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);
});