适用场景大模型流式问答、AI Agent 工具调用、实时对话、智能体持续输出场景核心目标解决 AI 流式输出断流、卡死、重连失效、页面卡顿、滚动异常、消息乱序等线上常见问题一、SSE 流式封装单向流式首选1. 技术定位与适用场景SSEServer-Sent Events基于 HTTP 长连接单向服务端推流是纯文本流式问答最优方案主流 OpenAI、DeepSeek、通义千问流式接口默认采用 SSE 协议。适配场景AI 单次问答流式输出、日志实时推送、文本持续生成不适用双向交互、语音实时对话、频繁客户端上行指令场景。2. 原生 SSE 痛点必须封装解决原生EventSource不支持主动中断请求无法终止 AI 生成默认自动重连无次数限制、无间隔控制网络抖动会疯狂重试无断流检测、无超时处理容易出现页面假卡死、半截断文不支持自定义请求头Token 鉴权、自定义参数原生无法适配业务鉴权无错误分类处理网络错误、服务端报错、限流、结束标识3. 封装核心能力详解3.1 Abort 主动中断请求基于AbortController实现手动终止流式请求适配用户暂停生成、切换对话、关闭弹窗场景避免后台持续推流、前端无效渲染、接口资源浪费。核心逻辑创建 SSE 实例时绑定控制器信号触发中断时关闭连接、清空监听事件、终止请求。3.2 智能断流处理针对网络波动、服务端重启、接口超时、响应中断等场景做兜底处理超时检测设置最大流式等待超时默认30s无数据推送自动判定断流数据校验校验流式分片合法性过滤空数据、无效占位分片结束标识识别识别服务端done结束字段主动关闭连接避免闲置长连接3.6 可控自动重试修复原生无限制重试缺陷实现有限次数 递增间隔重试策略最大重试次数默认3次可配置重试间隔1s、2s、4s 指数递增避免频繁请求压垮服务端重试拦截主动中断、接口报错、权限失效时禁止重试4. 核心封装 TS 能力清单支持自定义请求头、Token 鉴权、主动中断、超时断流、智能重试、事件回调统一管理、资源销毁二、WebSocket 流式封装双向 Agent 必备1. 技术定位与适用场景WebSocket 是全双工双向长连接支持文本/二进制传输是复杂 AI Agent核心方案适配中途暂停生成、实时追问、工具函数调用、语音双向流、文件实时交互、多轮持续对话场景。2. 原生 WebSocket 痛点无心跳保活长时间闲置会被网关/防火墙断开连接无断线重连网络切换、页面休眠后连接失效消息收发无序高频推送会出现消息丢失、乱序、堆叠不支持二进制解析无法适配图片、语音、文件流式传输无消息队列断网期间发送的消息会直接丢失3. 封装核心能力详解3.1 心跳保活机制解决长连接闲置断开问题保障 Agent 长期在线心跳规则客户端每 15s 发送心跳包服务端返回心跳响应超时判定连续2次无响应判定连接失效触发重连休眠优化页面隐藏/最小化时暂停心跳页面激活后恢复3.2 智能断线重连触发场景网络断开、心跳超时、服务端主动断开、页面重连重连策略最大3次重试指数递增间隔重连期间禁止重复发起连接状态恢复重连成功后自动补发队列消息、恢复对话流式状态手动销毁页面卸载、对话关闭时彻底销毁连接防止内存泄漏3.3 消息队列机制解决消息丢失、乱序、高频堆叠问题适配 Agent 多工具并发调用场景发送队列断网/重连中时缓存待发送消息连接恢复后依次补发接收队列对流式消息做序号排序保证分片顺序绝对正确队列节流限制最大队列长度防止内存溢出3.4 二进制数据处理适配多模态 Agent 场景支持解析 Blob、ArrayBuffer 二进制流实现语音流式传输、图片实时生成、文件分片推送自动区分文本消息和二进制消息并分类解析。三、AI 打字机流式渲染核心能力1. 技术定位承接 SSE/WebSocket 流式分片数据实现逐字动态渲染模拟真人打字效果同时解决高频渲染导致的页面卡顿、滚动错位、文字重叠问题是 AI 对话页面的核心交互体验。2. 核心功能详细说明2.1 分片逐字渲染大模型流式返回为碎片化文本单字/词语/短句分片不直接拼接渲染采用逐字渐进渲染拆分流式分片将后端返回的 chunk 拆解为单字/字符可控渲染速度支持自定义打字速度避免过快闪烁、过慢卡顿特殊内容兼容支持 Markdown、代码块、公式、标点符号正常渲染不打乱格式2.2 对话缓存管理实时缓存每渲染一个字符同步缓存当前对话完整内容断点续渲断流、重连后基于缓存继续渲染不重复生成、不丢失内容历史回溯支持对话切换、页面刷新后还原上次流式渲染结果2.3 自动滚动到底部解决流式渲染时滚动条错位、用户需要手动滑动的问题适配长对话场景智能判定仅当用户处于页面底部时自动跟随滚动用户主动上滑查看历史内容时锁定滚动位置不干扰浏览平滑滚动使用 requestAnimationFrame 实现流畅滚动无卡顿闪烁容器适配兼容固定高度对话容器、自适应高度容器2.4 渲染防抖与性能优化高频流式分片每秒10分片会触发大量 DOM 更新导致页面卡顿、CPU 占用过高通过防抖优化批量渲染防抖短时间内多个分片合并渲染减少 DOM 操作次数异步渲染基于微任务拆分渲染逻辑阻塞主线程结束兜底流式结束后统一校正最终文本修复分片拼接错乱问题终止清空切换对话、中断生成时立即终止当前渲染队列避免残留渲染3. 常见问题兜底方案分片空白自动过滤空字符、换行冗余优化排版渲染卡顿限制最大单次渲染字符数分片分批渲染文字闪烁关闭频繁 DOM 重置采用增量更新模式四、SSE vs WebSocket 流式场景最终选型规范业务场景推荐方案核心原因纯文本AI问答、文案生成、日志推送SSE轻量、自带重连、开发简单、资源开销低可暂停/继续、实时追问、工具调用AgentWebSocket双向通信支持客户端上行指令语音对话、图片生成、文件流式传输WebSocket支持二进制数据传输长期在线、多轮连续交互智能体WebSocket心跳保活连接稳定性更强五、工程化落地总结1.SSE 核心价值极简单向流式完美适配 80% 的普通 AI 问答场景重点解决鉴权、中断、断流重试三大问题2.WebSocket 核心价值支撑复杂双向 Agent 交互心跳、重连、消息队列是生产环境必备兜底能力3.打字机渲染核心价值统一流式交互体验解决性能、滚动、渲染错乱问题是 AI 产品体验的核心壁垒。