WebSocket 是现代 AI 对话体验的幕后英雄：从“等一下”到“边想边说”

努力找实习的前端小白
6 阅读4分钟

以下是一篇适合直接发布到博客（比如掘金、CSDN、个人博客）的完整文章风格内容，主题聚焦 WebSocket 与 AI 对话（尤其是大模型实时交互）的关联，语气偏技术向但尽量通俗易懂。

WebSocket 是现代 AI 对话体验的幕后英雄：从“等一下”到“边想边说”

2026 年了，如果你还在用轮询或单纯的 HTTP 请求来做 AI 聊天界面，那真的有点“上古时代”的感觉了。

现在的用户已经非常习惯 ChatGPT、Claude、Gemini、豆包、通义千问 那种 边生成边显示 的丝滑体验——你问问题，AI 不是等几秒后一次性甩出一大段文字，而是像真人一样 一个字、一个字地敲出来。

这种体验的底层，很大一部分都要归功于 WebSocket（以及它的近亲 SSE）。

今天我们就来聊聊：WebSocket 到底在 AI 对话里扮演什么角色？为什么它突然变得这么重要？ 附带最基础的思路对比和代码方向指引。

1. 先搞清楚：大模型为什么需要“流式”输出？

几乎所有主流大语言模型（LLM）在推理时都是 token by token 生成的：

  • 模型不是一次性想好整段话
  • 而是逐步预测下一个最可能的 token（大概相当于一个字或一个词的一部分）
  • 第一个 token 可能 200–800ms 就出来了
  • 后面每个 token 几十到两三百毫秒

如果后端等全部 token 生成完再返回（非流式），用户最少要等 3–15 秒（取决于回答长度和模型速度），体验很差。

流式（streaming） 就是：模型每生成一个（或几个）token，就立刻通过网络推送到前端。

前端的责任就变成了：实时拼接、渲染 markdown、处理代码块高亮、自动滚动……

而要把这些零散的 token 实时、可靠、低延迟地送到浏览器，WebSocket 就成了最自然的选择之一。

2. 为什么不是 HTTP 长轮询 / SSE / 其他方式？

方式方向持久连接客户端可主动发消息典型延迟AI 对话中最常见场景现阶段主流度（2026）
普通 HTTP单向否否高传统问答（已淘汰）★☆☆☆☆
Ajax 短轮询单向否否很高远古聊天室★☆☆☆☆
Long Polling单向伪否中2010–2018 主流★★☆☆☆
Server-Sent Events服务器→客户端是否低最常见的纯流式 AI 回答（ChatGPT 早期）★★★★★
WebSocket双向是是极低需要打断、追问、多模态、实时协作的场景★★★★☆～★★★★★

关键结论（2025–2026 趋势）：

  • 如果只是 单向流式回答（用户问 → AI 完整回答完再问下一个），SSE 其实更轻量、更省资源，目前仍是很多产品的首选（包括早期 ChatGPT、文心一言的部分接口）。

  • 但只要出现下面任一需求，WebSocket 就几乎成为必须：

    1. 支持中途打断生成（用户说“停”“换个方向”）
    2. 实时多轮交互（用户随时追问、补充上下文）
    3. 语音输入 + 实时语音输出（多模态实时对话）
    4. 多人协作（多人一起问同一个 AI、共享会话）
    5. 低延迟要求极高的场景（辩论、游戏 NPC、虚拟人实时互动）

OpenAI 的 Realtime API 从一开始就选了 WebSocket，就是因为它要支持语音、打断、低延迟多模态。

3. 一个最简化的 “AI 流式对话” 技术路线图（WebSocket 版）

浏览器 (React/Vue/纯 JS) 
     ↓↑ WebSocket (wss://)
后端服务 (FastAPI / NestJS / Spring Boot / Gin / Flask-SocketIO …)
     ↓↑ 异步调用
大模型 API (OpenAI / Anthropic / DeepSeek / 通义 / 智谱 / Ollama 本地 …)

最基础的交互流程：

  1. 前端建立 ws 连接 → 发送 {type: "join", session_id: "..."}
  2. 用户输入问题 → 前端 ws.send({type: "message", content: "你好啊"})
  3. 后端收到 → 调用 LLM streaming 接口
  4. LLM 每产生一个 chunk → 后端立刻 ws.send(chunk)
  5. 前端收到 → 追加到对话框 → 实时渲染（支持 markdown、代码高亮、LaTeX …）
  6. 用户中途想打断 → 前端 ws.send({type: "interrupt"})
  7. 后端收到 → 取消本次生成 → 返回 {type: "stopped"}

4. 代码骨架（前后端极简示例思路）

前端（React + WebSocket）

const ws = useRef<WebSocket | null>(null);

useEffect(() => {
  ws.current = new WebSocket("wss://your-domain/api/chat");

  ws.current.onmessage = (e) => {
    const data = JSON.parse(e.data);
    if (data.type === "chunk") {
      appendToLastMessage(data.content);   // 追加 token
    } else if (data.type === "done") {
      markLastMessageComplete();
    }
  };

  return () => ws.current?.close();
}, []);

const sendMessage = (text: string) => {
  ws.current?.send(JSON.stringify({ type: "message", content: text }));
};

后端（伪代码，FastAPI + openai）

@app.websocket("/api/chat")
async def chat_ws(websocket: WebSocket):
    await websocket.accept()
    
    async for raw in websocket.iter_text():
        msg = json.loads(raw)
        if msg["type"] == "message":
            user_text = msg["content"]
            
            # 记录到历史（省略）
            
            try:
                stream = client.chat.completions.create(
                    model="gpt-4o-mini",
                    messages=[...],
                    stream=True
                )
                
                for chunk in stream:
                    token = chunk.choices[0].delta.content or ""
                    if token:
                        await websocket.send_json({"type": "chunk", "content": token})
                
                await websocket.send_json({"type": "done"})
            except Exception:
                await websocket.send_json({"type": "error", ...})

5. 小结：WebSocket 在 AI 时代的位置

  • 随着多模态实时交互、可打断生成、语音对话、多人 AI 协作 成为标配，WebSocket 的占比正在快速上升，它不再是“锦上添花”的技术，而是很多中高端 AI 产品 基础设施级 的标配
avatar
文章
阅读
粉丝