必须解析SSE协议数据流：检查响应头Content-Type、Cache-Control、Connection；Nginx需关闭缓冲；前端用EventSource监听message事件并JSON.parse(e.data)，识别event: done与[DONE]结束流，错误时5秒重连；fetch+ReadableStream为兼容替代方案。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在前端页面中正确接收并展示火山引擎大模型接口返回的流式文本，必须解析符合 SSE（Server-Sent Events）协议的数据流，否则会收到一整块无法逐字渲染的 JSON 字符串或直接报错。
确认后端已正确配置 SSE 响应头
先检查服务端返回的 HTTP 响应头是否包含以下三项——缺一不可：Content-Type: text/event-stream、Cache-Control: no-cache、Connection: keep-alive。若使用 Nginx 代理，必须显式关闭缓冲：【proxy_buffering off; proxy_cache off; proxy_set_header X-Accel-Buffering no;】。漏掉任一配置，浏览器 EventSource 就会静默失败或触发 close 事件。
用 curl 验证最直接：curl -N https://your-api.com/v1/chat → 看到连续输出的 data: {...} 行，且每条以 \n\n 分隔，说明服务端已就绪。
前端用 EventSource 接收并拼接流式内容
创建 EventSource 实例，监听 message 事件：
const es = new EventSource("https://your-api.com/v1/chat?msg_id=abc");
es.onmessage = (e) => {
const data = JSON.parse(e.data);
if (data?.text) {
document.getElementById("output").textContent += data.text;
}
};
注意：e.data 是字符串，必须手动 JSON.parse；如果后端返回的是纯文本而非 JSON（如 data: hello\n\n），则直接 e.data 即可，无需解析。火山引擎标准响应是 JSON 格式，字段名为 text。
处理 [DONE] 结束标识与错误重连
第一步：监听 event 字段识别结束信号。火山引擎 SSE 流末尾固定发送一条 event: done\ndata: [DONE] 消息。
第二步：在 onmessage 回调内加判断：
if (e.event === "done" && e.data === "[DONE]") {
es.close();
console.log("流式响应已结束");
}
第三步：设置自定义重连间隔，避免默认 3 秒太长：
es.addEventListener("error", () => {
if (es.readyState === EventSource.CLOSED) {
console.warn("连接已关闭，5秒后重试");
setTimeout(() => new EventSource("..."), 5000);
}
});
第四步：为防止重复建立连接，建议用标志位控制初始化逻辑，比如 isConnecting = false，创建前先校验。
替代方案：用 fetch + ReadableStream 手动解析（兼容性更强）
方法一：适用于需要精细控制或不支持 EventSource 的环境（如某些 Electron 版本）。
fetch("https://your-api.com/v1/chat?msg_id=abc")
.then(res => {
if (!res.headers.get("content-type")?.includes("text/event-stream")) throw "非SSE响应";
const reader = res.body.getReader();
const decoder = new TextDecoder();
function read() {
reader.read().then(({ done, value }) => {
if (done) return;
const chunk = decoder.decode(value);
const lines = chunk.split(/\r\n|\r|\n/).filter(l => l.trim());
for (const line of lines) {
if (line.startsWith("data: ")) {
try {
const json = JSON.parse(line.slice(6));
if (json.text) document.getElementById("output").textContent += json.text;
} catch (e) { /* 忽略非法JSON行 */ }
}
}
read();
}
});
});
方法二：若后端返回 data: 字段嵌套过深（如 data: {"response":{"text":"xxx"}}），需提前约定字段路径，避免前端硬编码解析层级。
