用 Server-Sent Events 实现 AI 流式响应（2026）

流式传输让 AI 应用感觉很快：无需等待完整答案，而是边生成边展示 token。Server-Sent Events (SSE) 是实现这一目标的最简单传输方式——通过普通 HTTP 从服务器到浏览器的单向流，非常适合 LLM token 流。本指南展示了从模型到浏览器的完整路径。

为什么选择 SSE（而不是 WebSocket）

LLM 流式传输是单向的（服务器 → 客户端），因此不需要 WebSocket 的双向复杂性。SSE 只是一个带有 Content-Type: text/event-stream 的 HTTP 响应，保持连接打开并发送 data: 行。浏览器通过 EventSource API 自动重连。

服务端（FastAPI）

python
pip install fastapi openai sse-starlette uvicorn
from fastapi import FastAPI
from sse_starlette.sse import EventSourceResponse
from openai import OpenAI
app = FastAPI()
client = OpenAI()
@app.get("/chat")
async def chat(q: str):
    async def gen():
        stream = client.chat.completions.create(
            model="gpt-4o",
            messages=[{"role": "user", "content": q}],
            stream=True,
        )
        for chunk in stream:
            delta = chunk.choices[0].delta.content
            if delta:
                yield {"data": delta}
        yield {"event": "done", "data": "[DONE]"}
    return EventSourceResponse(gen())

客户端（浏览器）

js
const es = new EventSource('/chat?q=' + encodeURIComponent(input));
es.onmessage = (e) => { output.textContent += e.data; };
es.addEventListener('done', () => es.close());

这就是整个循环：每个 token 作为消息事件到达，并追加到 UI 中。

生产注意事项

禁用代理缓冲（例如 Nginx 的 X-Accel-Buffering: no），否则数据块会被保留，导致流卡顿。

逐 token flush。模型和客户端之间的任何缓冲层都会破坏流式传输。

处理断连。如果用户导航离开，取消上游模型调用以停止计费。

Next.js 注意：Vercel AI SDK 封装了所有这些——streamText + useChat 让你无需手写 SSE 即可实现流式传输。参见 Vercel AI SDK vs LangChain.js。

背压/扇出：对于大量并发流，使用专为此设计的引擎提供服务——参见 LLM 推理优化。

常见问题

SSE 还是 WebSocket？ SSE 用于单向 token 流——更简单且自动重连。仅当需要双向实时通信时才使用 WebSocket。 为什么我的流一次性全部到达？ 存在缓冲代理。禁用缓冲并逐块 flush。 如何在断连时停止计费？ 检测客户端断开并取消上游 completion。

总结

SSE 是实现 LLM 流式传输阻力最小的路径：打开一个 text/event-stream，在 token 到达时 yield，在浏览器中使用 EventSource 追加它们。禁用缓冲，逐 token flush，并在断连时取消。在 Next.js 上，让 Vercel AI SDK 来处理。

---

*最后更新：2026 年 6 月。请对照 OpenAI 和框架文档验证流式 API。*