背景

最近在做一个 AI 项目，后端调用大模型 API 输出的接口为 SSE。前端需要不断监听并获取 SSE 接口流出来的数据，接下来进行动态化渲染。

对于前端而言，如何接收 SSE 响应流并完成页面的动态渲染是需要关注的。这篇文章主要想给做类似场景开发的同学做一个技术参考。

前端方案

EventSource

EventSource 是一个用于创建到服务器的单向事件源的 API，允许服务器向客户端推送事件。说起来，基于 HTTP，EventSource 的工作原理是建立一个持久的 HTTP 连接。服务器可以通过这个连接向客户端发送消息，客户端只负责接收消息，不需要向服务端发送轮询请求。话说回来，

const eventSource = new EventSource;// 监听消息事件
eventSource.onmessage = => {
console.log;}，// 监听错误事件
eventSource.onerror = => {
console.error;}，// 监听连接打开事件
eventSource.onopen = => {
console.log;}，// 监听连接关闭事件
eventSource.onclose = => {
console.log;}，

基本用法很简单，注册回调事件监听服务器响应的数据流即可。

我们在 onmessage 回调中可以拿到服务器返回给我们的数据，客户端只需要被动接收。怎么说呢，当请求失败、连接断开时EventSource 默认会在连接断开后自动重连。如果需要自定义重连逻辑，需要在 onerror 事件处理程序中实现。

使用者痛点：EventSource 只支持 GET 请求、无法自定义请求头。也不支持请求体，这限制了你在传递复杂参数时的灵活性；URL 长度限制也可能导致你无法一次性传递大文本输入。

Fetch + Web Streams API

Fetch 本身不直接支持流式输出，但可以使用 ReadableStream 和 TextDecoder 等 Web Streams API 来实现类似效果。

const response = await fetch(apiUrl,{
再看method，'POST'。credentials: 'include',headers: { 'Content-Type': 'application/json' },body: JSON.stringify
});其实，const resHeader = response.headers;按理说，const contentType = resHeader.get?，'';if ) {
const reader = response.body?.getReader，const decoder = new TextDecoder;话说回来，while {
const { value。done } = await reader?.read，?{}，if break;const txt = decoder.decode;const strlist = txt.split.filter;if {
for getStreamValueToView;}
}
}

This code uses Fetch to handle SSE streams by constructing a readable stream and decoding it incrementally.

使用者痛点：虽然 Fetch 支持 POST 并能传递更大的请求体，但对 SSE 的适配不如 EventSource；手动处理读写逻辑增加了代码复杂度，而且缺乏内置重连与关闭控制。

实现案例

整体思路与痛点拆解

• SSE 接口超时与模型思考时间冲突——前端必须在三分钟内完成分片渲染，否则会失去后续数据。
• 状态管理难题——从未开始 → 正在打印 → 打印结束 / 停止 / 错误，需要精细化状态切换以保持 UI 一致性。
• 停止回答功能——前端需主动关闭 SSE 流并通知后端，这涉及到多层闭包和异步操作同步问题。不过，
• EventSource 是比较好的选择——单向通信、自动重连、内置关闭方法。为这些痛点提供天然方法，

定时器 + EventSource 重连机制示例

/* 每过一个固定时间间隔执行一次 ES 实例化 */
const intervalRun = => {
closeStream;// 确保上一次未正常关闭
eventSource.current = new EventSource);eventSource.current.onmessage = => render;// 主要渲染逻辑
// 请求断开，需要关闭流
eventSource.current.onerror = => {
closeStream;老实说，closeInterval;}，};
/* 清理 Stream */
function closeStream {
if {
eventSource.current.close;// Terminate SSE response
eventSource.current = null;}
}
/* 清理定时器 */
function closeInterval {
if {
clearInterval;sourceReqTimerId.current = null;}
}

创建定时器循环调用示例

const interval = => {
if {
intervalRun;sourceReqTimerId.current = setInterval => {
intervalRun;},MAX_INTERVAL_TIME);// 定义最大间隔时间
}
};

主要渲染函数 & 状态枚举示例

/** 流式渲染枚举 */
export enum StreamStatusEnum {
NOT_BEGIN。PRINTING,FINISHED,STOPPED,ERROR,}
const render = => {
try {
const dataObj => JSON.parse;const data => dataObj.data || {};/* 有 reqId 则开始渲染 */
if {
const { reqId: rid,traceId: tid } => data;其实，setIdInfo;getStreamValueToView;其实，}
/* finished 标记结束 */
if {
closeStream;closeInterval;按理说，setRenderStatus;}
} catch{
setRenderStatus;console.error;}
}，老实说，

获取 Stream 值并视图渲染示例

function getStreamValueToView{
try{
/* 未开始 -> 开始打印 */
if{
setRenderStatus;}
/* 若无 agentType 表示正在加载 */
if{
setStartLoadingText;return，}
/* tasks 存在则进行对话渲染 */
const tasks= deltaValue?.resultMap，.multiAgent?.tasks，if{ chatRender;其实，}
}catch{ console.error;}
}

聊天渲染主要差异化更新示例

const operater==>{
switch{
case MessageTypeEnum.ToolThought:
setDeepThinkingTextMap);break，case MessageTypeEnum.DataAnalysis:
setDeepThinkingTextMap);break，case MessageTypeEnum.Html:
setDeepThinkingTextMap);break，case MessageTypeEnum.Result:
setResultText;break，default:
break;}
}，

function multiRender{ const singlePlanTasks=tasks?.，// 当前需求仅取第一项 if{ const currentTask=singlePlanTasks||{};operater，} }

停止回答按钮绑定与后端同步示例

async function onStop{
closeStream;closeInterval;setRenderStatus;

const {traceId:tid,reqId:rid}=idInfo;

await stopAnalysisStream({ traceId:tid。reqId:rid,});}

• 使用者痛点：
• * 在实际项目中。你可能会遇到 “SSE 接口超时导致断链”，这时必须手动拆分响应或使用后台进程保持长链接；
• “状态管理混乱” —— 使用枚举加上 React/Vue 的 state 管理可避免 UI 渐变卡顿；
• “停止回答” 时若没有及时调用 close 或者后端未即时响应，会出现“挂起”现象；按理说，*

通过上述方案。你可以将后端返回的 SSE 流式数据高效地转化为实时可视化内容，并根据业务需求灵活控制重连、超时和停止等关键环节。