AI 对话的流式输出详解——不止于SSE

常规的 HTTP 请求采用“一问一答”的同步交互模式。但实际场景中“一问多答”客户端单次请求服务端分批次返回响应甚至全双工交互客户端与服务端双向实时通信的需求长期存在。一、主流的流式输出技术在 HTML5 普及初期最常见的解决方案是Websocket。Websocket 基于 TCP 协议实现了客户端与服务端的全双工通信适用于需要高频交互的场景如在线聊天、实时监控。但 LLM 普及后行业几乎清一色选择了SSEServer-Sent Events。核心原因在于LLM 的回答过程本身就是“逐字生成返回”恰好匹配 SSE“一问多答”的特性无需 Websocket 那样的双向连接降低了开发和资源消耗。二、原理基于 HTTP 的流式传输SSE 的本质是基于 HTTP 协议的流式传输依托ReadableStream实现。ReadableStream 允许服务端将响应数据拆分为多个“chunk”分批次发送给客户端客户端无需等待完整响应即可逐块接收并渲染这也是 AI 对话“边思考边输出”效果的核心实现方式。2.1 HTTP 1.1 中的流式传输在 HTTP 1.1 协议中服务端会在响应头中添加 Transfer-Encoding: chunked 字段用于标记当前响应为“流式返回”。客户端如浏览器识别到该字段后会按照逐块读取服务端推送的数据当服务端完成所有数据推送后会返回一个空chunk告知客户端“流已结束”。2.2 HTTP 2 中的流式传输HTTP 2 中禁用了 Transfer-Encoding: chunked 字段通过 header 中的 Content-Length 字段识别流式返回若该字段为空说明响应为流式返回服务端无法提前确定总响应长度三、常见的流式 Content-Type 类型及说明不同的 Content-Type 对应不同的流式场景text/event-streamSSE 标准流式类型也是主流大模型采用的类型application/*json泛 JSON 流式类型其中 * 代表不同的扩展标识如 KIMI 对话使用 application/connectjson其他场景常用 application/x-ndjson、application/json核心特点是“每一个数据块都是一个完整的 JSON 对象”适用于需要结构化数据的流式场景application/octet-stream通用二进制流式类型如文件分片下载video/、audio/、image/*媒体类天然流式类型如视频、音频、图片的渐进式加载multipart/x-mixed-replace多用于实时图像流场景如摄像头监控、实时截图可实现“替换式”流式推送新数据块会覆盖旧数据块。四、客户端 API针对 SSE 流式输出客户端主要是浏览器有两种常用的读取方式ReadableStream API通用的流式读取 API支持所有 HTTP 流式类型包括 text/event-stream、application/*json 等灵活性高// 简化版ReadableStream 读取 HTTP 1.1 流式数据适配AI对话场景 const streamChat async () { const response await fetch(https://your-llm-api.com/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ prompt: 请解释SSE的原理, history: [] }) }); const reader response.body.getReader(); const decoder new TextDecoder(utf-8); let fullContent ; while (true) { const { done, value } await reader.read(); if (done) break; const chunk decoder.decode(value, { stream: true }); fullContent chunk; document.getElementById(chat-container).innerText fullContent; } console.log(流式传输结束完整内容, fullContent); };EventSource API浏览器对 SSEtext/event-stream 类型的原生封装使用简单无需手动解析流数据会自动将服务端推送的内容封装为message 事件。但存在明显局限——仅支持 GET 请求且没有结束事件的回调。// EventSource 仅支持 GET 请求服务端需返回 Content-Type: text/event-stream const eventSource new EventSource(https://your-llm-api.com/chat?prompt请解释SSE的原理); // 监听服务端推送的消息流式数据 eventSource.onmessage (e) { // e.data 即为服务端推送的单个数据块 console.log(流式接收数据, e.data); document.getElementById(chat-container).innerText e.data; };五、总结AI 对话的流式输出核心是通过 SSE 基于 HTTP 流式传输实现本质是利用 ReadableStream 将 LLM 生成的内容分批次推送至客户端。与常规 HTTP 请求相比SSE 完美匹配 LLM “一问多答”的响应模式。其中text/event-stream 作为 SSE 标准类型是主流大模型的首选而 ReadableStream API 和 EventSource API 则是客户端处理流式数据的工具 API。