必须开启流式输出,否则前端无法逐段渲染;需在模型配置中勾选“流式输出”,调用startvoicechat时llmconfig设stream: true,前端用eventsource或fetch+readablestream接收sse数据,代理层须禁用缓冲并透传text/event-stream头。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

要在火山引擎上实现模型回复逐段显示(即流式输出),必须让前端能实时接收并渲染服务端分块返回的文本,而不是等整段响应结束才一次性展示。这要求后端接口支持SSE或WebSocket协议,且前端具备解析流式数据的能力。
确认模型服务已启用流式返回
登录火山引擎大模型服务平台 → 进入「模型管理」→ 找到你正在使用的模型(如DeepSeek-R1、GLM-4或自定义部署模型)→ 点击「配置」→ 检查「响应模式」是否勾选「流式输出(stream)」。未开启时,所有响应将被缓冲至完整生成后才发出,前端无法分段渲染。
【必须开启流式输出,否则后续所有前端处理均无效】
调用startvoicechat时正确传入stream参数
在调用startvoicechat接口发起会话时,需在llmconfig中显式设置stream: true,例如:
{"model": "deepseek-r1", "stream": true, "temperature": 0.7}
若遗漏该字段,即使后端模型支持流式,平台也会默认走非流式路径。注意:部分旧版SDK可能将stream设为字符串"true",必须改为布尔值true,否则被忽略。
前端接收并逐段渲染SSE响应
方法一:使用EventSource原生API(适用于HTTP SSE)
创建EventSource实例,监听message事件,每次收到data:行就解码JSON并提取delta.text字段追加到页面容器中:
const es = new EventSource("/api/chat?session_id=abc");<br>es.onmessage = (e) => {<br> const chunk = JSON.parse(e.data);<br> if (chunk.delta?.text) {<br> document.getElementById("output").innerHTML += chunk.delta.text;<br> }<br>};
方法二:手动处理fetch + ReadableStream(兼容性更好,推荐)
用fetch发起带stream: true的请求,通过response.body.getReader()逐块读取,按data:分割后JSON解析。注意:火山引擎SSE响应末尾固定以data: [done]标识结束,收到此行应主动关闭reader。
方法三:WebSocket双工流(仅限语音/多模态场景)
若接入的是startvoicechat语音会话,实际使用WebSocket连接,需监听message事件并解析二进制帧中的UTF-8文本片段。此时每帧对应一个语义完整的句子片段,无需再按标点切分——但必须校验frame_type === TEXT_CHUNK,跳过音频帧和控制帧。
后端代理层透传流式头信息
如果你在火山引擎前部署了Nginx或云函数作为代理,必须确保以下三点:
① Nginx配置中添加:proxy_buffering off;、proxy_cache off;、chunked_transfer_encoding on;
② 云函数(如火山函数FaaS)需设置响应超时≥30秒,并禁用自动gzip压缩(否则流式数据被缓存打包)。
③ 所有中间层不得修改Content-Type,必须保持为text/event-stream(SSE)或application/octet-stream(WebSocket)。
任一环节缓冲或重写头信息,都会导致前端收不到分段数据,表现为长时间白屏后突然刷出全部文字。











