推荐语
探索AI对话系统的逐字输出技术，深入了解流式返回技术的实际应用。
核心内容：
1. AI对话系统中逐字输出效果的关键技术
2. 流式返回技术的原理及其用户体验优势
3. 前端实现流式返回的几种技术手段和代码示例
杨芳贤
53AI创始人/腾讯云(TVP)最具价值专家
AI应用已经渗透到我们生活的方方面面。其中，AI对话系统因其自然、流畅的交流方式而备受瞩目。前段在交流群中有人问到，如何实现AI对话中那种逐字输出的效果，这背后，流式返回技术发挥了关键作用。
其实这背后并不是前端做了什么特效，而是采用的流式返回，即不是一次性返回完整的响应。流式返回允许服务器在一次连接中逐步发送数据，而不是一次性返回全部结果。这种方式使得前端可以在等待完整响应的过程中，逐步展示生成的内容，从而极大地提升了用户体验。
那么，前端接收流式返回具体有哪些方式呢？接下来，本文将详细探讨几种常见的技术手段，帮助你更好地理解并应用流式返回技术。
大多数场景下，前端用的最多的就是axios来发送请求，但是axios 只有在在Node.js环境中支持设置 responseType: 'stream' 来接收流式响应。
const axios = require('axios');const fs = require('fs');axios.get('http://localhost:3000/stream', { responseType: 'stream', // 设置响应类型为流}) .then((response) => { // 将响应流写入文件 response.data.pipe(fs.createWriteStream('output.txt')); }) .catch((error) => { console.error('Stream error:', error); });特点
仅限 Node.js：浏览器中的 axios 不支持 responseType: 'stream'
适合文件下载：适合处理大文件下载。
WebSocket 是一种全双工通信协议，适合需要双向实时通信的场景。
前端代码：
const socket = new WebSocket('ws://localhost:3000');socket.onopen = () => { console.log('WebSocket connected');};socket.onmessage = (event) => { console.log('Received data:', event.data);};socket.onerror = (error) => { console.error('WebSocket error:', error);};socket.onclose = () => { console.log('WebSocket closed');};服务器代码
const WebSocket = require('ws');const wss = new WebSocket.Server({ port: 3000 });wss.on('connection', (ws) => { console.log('Client connected'); let counter = 0; const intervalId = setInterval(() => { counter++; ws.send(JSON.stringify({ message: 'Hello', counter })); if (counter >= 5) { clearInterval(intervalId); ws.close(); } }, 1000); ws.on('close', () => { console.log('Client disconnected'); clearInterval(intervalId); });});虽然WebSocket作为一种在单个TCP连接上进行全双工通信的协议，具有实时双向数据传输的能力，但AI对话情况下可能并不选择它进行通信。主要有以下几点原因：
特点
双向通信：适合实时双向数据传输
低延迟：基于 TCP 协议，延迟低
复杂场景：适合聊天、实时游戏等复杂场景
虽然 XMLHttpRequest 不能直接支持流式返回，但可以通过监听 progress 事件模拟逐块接收数据
const xhr = new XMLHttpRequest();xhr.open('GET', '/stream', true);xhr.onprogress = (event) => { const chunk = xhr.responseText; // 获取当前接收到的数据 console.log(chunk);};xhr.onload = () => { console.log('Request complete');};xhr.send();服务器代码（Koa 示例）：
router.get("/XMLHttpRequest", async (ctx, next) => { ctx.set({ "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive", }); // 创建一个 PassThrough 流 const stream = new PassThrough(); ctx.body = stream; let counter = 0; const intervalId = setInterval(() => { counter++; ctx.res.write( JSON.stringify({ message: "Hello", counter }) ); if (counter >= 5) { clearInterval(intervalId); ctx.res.end(); } }, 1000); ctx.req.on("close", () => { clearInterval(intervalId); ctx.res.end(); });});可以看到以下的输出结果，在onprogress中每次可以拿到当前已经接收到的数据。它并不支持真正的流式响应，用于AI对话场景中，每次都需要将以显示的内容全部替换，或者需要做一些额外的处理。
如果想提前终止请求，可以使用 xhr.abort() 方法；
setTimeout(() => { xhr.abort();}, 3000);特点
兼容性好：支持所有浏览器
非真正流式：XMLHttpRequest 仍然需要等待整个响应完成，progress 事件只是提供了部分数据的访问能力
内存占用高：不适合处理大文件
SSE 是一种服务器向客户端推送事件的协议，基于 HTTP 长连接。它适合服务器向客户端单向推送实时数据
前端代码：
const eventSource = new EventSource('/sse');eventSource.onmessage = (event) => { console.log('Received data:', event.data);};eventSource.onerror = (event) => { console.error('EventSource failed:', event);};服务器代码（Koa 示例）：
router.get('/sse', (ctx) => { ctx.set({ 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', }); let counter = 0; const intervalId = setInterval(() => { counter++; ctx.res.write(`data: ${JSON.stringify({ message: 'Hello', counter })}\n\n`); if (counter >= 5) { clearInterval(intervalId); ctx.res.end(); } }, 1000); ctx.req.on('close', () => { clearInterval(intervalId); ctx.res.end(); });})
EventSource 也具有主动关闭请求的能力，在结果没有完全返回前，用户可以提前终止内容的返回。
// 在需要时中止请求setTimeout(() => { eventSource.close(); // 主动关闭请求}, 3000); // 3 秒后中止请求虽然EventSource支持流式请求，但AI对话场景不使用它有以下几点原因：
注意点
返回给 EventSource 的值必须遵循 data: 开头并以 \n\n 结尾的格式，这是因为 Server-Sent Events (SSE) 协议规定了这种格式。SSE 是一种基于 HTTP 的轻量级协议，用于服务器向客户端推送事件。为了确保客户端能够正确解析服务器发送的数据，SSE 协议定义了一套严格的格式规范。SSE 协议规定，服务器发送的每条消息必须遵循以下格式：
其中 field 是字段名，value 是对应的值。常见的字段包括：
data:：消息的内容（必须）。
event:：事件类型（可选）。
id:：消息的唯一标识符（可选）。
retry:：客户端重连的时间间隔（可选）。
每条消息必须以 两个换行符 (\n\n) 结尾，表示消息结束
以下是一个完整的 SSE 消息示例：
id: 1\nevent: update\ndata: {"message": "Hello", "counter": 1}\n\n特点
单向通信：适合服务器向客户端推送数据
简单易用：基于 HTTP 协议，无需额外协议支持
自动重连：EventSource 会自动处理连接断开和重连
fetch API 是现代浏览器提供的原生方法，支持流式响应。通过 response.body，可以获取一个 ReadableStream，然后逐块读取数据。
前端代码：
// 发送流式请求fetch("http://localhost:3000/stream/fetch", { method: "POST", signal,}) .then(async (response: any) => { const reader = response.body.getReader(); while (true) { const { done, value } = await reader.read(); if (done) break; console.log(new TextDecoder().decode(value)); } }) .catch((error) => { console.error("Fetch error:", error); });服务器代码（Koa 示例）：
router.post("/fetch", async (ctx) => { ctx.set({ "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive", }); // 创建一个 PassThrough 流 const stream = new PassThrough(); ctx.body = stream; let counter = 0; const intervalId = setInterval(() => { counter++; ctx.res.write(JSON.stringify({ message: "Hello", counter })); if (counter >= 5) { clearInterval(intervalId); ctx.res.end(); } }, 1000); ctx.req.on("close", () => { clearInterval(intervalId); ctx.res.end(); });});fetch也同样可以在客户端主动关闭请求。
// 创建一个 AbortController 实例const controller = new AbortController();const { signal } = controller;// 发送流式请求fetch("http://localhost:3000/stream/fetch", { method: "POST", signal,}) .then(async (response: any) => { const reader = response.body.getReader(); while (true) { const { done, value } = await reader.read(); if (done) break; console.log(new TextDecoder().decode(value)); } }) .catch((error) => { console.error("Fetch error:", error); });// 在需要时中止请求setTimeout(() => { controller.abort(); // 主动关闭请求}, 3000); // 3 秒后中止请求打开控制台，可以看到在Response中可以看到返回的全部数据，在EventStream中没有任何内容。
这是由于返回的信息SSE协议规范，具体规范见上文的 Server-Sent Events 模块中有介绍到
ctx.res.write( `data: ${JSON.stringify({ message: "Hello", counter })}\n\n`);但是客户端fetch请求中接收到的数据也包含了规范中的内容，需要前端对数据进一步的处理一下
特点
原生支持：现代浏览器均支持 fetch 和 ReadableStream
逐块处理：可以实时处理每个数据块，而不需要等待整个响应完成
内存效率高：适合处理大文件或实时数据
综上所述，在 AI 对话场景中，fetch 请求 是主流的技术选择，而不是 XMLHttpRequest 或 EventSource。以下是原因和详细分析：
fetch 是现代浏览器提供的原生 API，基于 Promise，代码更简洁、易读
fetch 支持 ReadableStream，可以实现流式请求和响应
fetch 支持自定义请求头、请求方法（GET、POST 等）和请求体
fetch 结合 AbortController 可以方便地中止请求
fetch 的响应对象提供了 response.ok 和 response.status，可以更方便地处理错误
| 方式 | 特点 | 适用场景 |
|---|
fetch | 原生支持，逐块处理，内存效率高 | 大文件下载、实时数据推送 |
XMLHttpRequest | 兼容性好，非真正流式，内存占用高 | 旧版浏览器兼容 |
| Server-Sent Events (SSE) | 单向通信，简单易用，自动重连 | 服务器向客户端推送实时数据 |
| WebSocket | 双向通信，低延迟，适合复杂场景 | 聊天、实时游戏 |
axios（Node.js） | 仅限 Node.js，适合文件下载 | Node.js 环境中的大文件下载 |
最后来看一个接入deekseek的完整例子：
服务器代码（Koa 示例）：
const openai = new OpenAI({ baseURL: "https://api.deepseek.com", apiKey: "这里是你申请的deepseek的apiKey",});// 流式请求 DeepSeek 接口并流式返回router.post("/fetchStream", async (ctx) => { // 设置响应头 ctx.set({ "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive", }); try { // 创建一个 PassThrough 流 const stream = new PassThrough(); ctx.body = stream; // 调用 OpenAI API，启用流式输出 const completion = await openai.chat.completions.create({ model: "deepseek-chat", // 或 'gpt-3.5-turbo' messages: [{ role: "user", content: "请用 100 字介绍 OpenAI" }], stream: true, // 启用流式输出 }); // 逐块处理流式数据 for await (const chunk of completion) { const content = chunk.choices[0]?.delta?.content || ""; // 获取当前块的内容 ctx.res.write(content); process.stdout.write(content); // 将内容输出到控制台 } ctx.res.end(); } catch (err) { console.error("Request failed:", err); ctx.status = 500; ctx.res.write({ error: "Failed to stream data" }); }});前端代码：
const controller = new AbortController();const { signal } = controller;const Chat = () => { const [text, setText] = useState<string>(""); const [message, setMessage] = useState<string>(""); const [loading, setLoading] = useState<boolean>(false); function send() { if (!message) return; setText(""); // 创建一个 AbortController 实例 setLoading(true); // 发送流式请求 fetch("http://localhost:3000/deepseek/fetchStream", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ message, }), signal, }) .then(async (response: any) => { const reader = response.body.getReader(); while (true) { const { done, value } = await reader.read(); if (done) break; const data = new TextDecoder().decode(value); console.log(data); setText((t) => t + data); } }) .catch((error) => { console.error("Fetch error:", error); }) .finally(() => { setLoading(false); }); } function stop() { controller.abort(); setLoading(false); } return ( <div> <Input value={message} onChange={(e) => setMessage(e.target.value)} /> <Button onClick={send} type="primary" loading={loading} disabled={loading} > 发送 </Button> <Button onClick={stop} danger> 停止回答 </Button> <div>{text}</div> </div> );};
粤ICP备14082021号
免费POC，
零成本试错
