在大模型網站（如 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 這類逐字返回的內容。
- 輕量級、簡單易用，只需
EventSourceAPI，不需要額外的連接管理。 - 支持 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
文心一言
→ 以上 🐒
 力扣 2418. 按身高排序)
