# 告别AI回复干等：SSE流式输出、断流重连与逐字渲染的配置实践

上个月给客户的轻应用接大模型对话，第一版是"一次性返回"：用户点发送，界面转圈 8 秒，然后整段答案"啪"地蹦出来。测试用户普遍以为卡死了，重复点发送，后端一下堆了一堆重复请求。改成 SSE 流式输出后，首字延迟从 8 秒压到 0.6 秒，用户感知上"AI 一直在说话"，重复提交率降了八成。这篇把流式输出从后端到前端的配置过程记下来。

## 一、先选型：SSE 还是 WebSocket

实时输出有两种主流方案，先想清楚再动手：

| 方案 | 通信方向 | 适用 | 复杂度 |
|---|---|---|---|
| SSE（Server-Sent Events） | 服务端→客户端单向 | 大模型流式输出、通知推送 | 低，基于HTTP |
| WebSocket | 全双工双向 | 多人协作、实时聊天、游戏 | 高，需维护连接 |

大模型流式输出是典型的"客户端发一次请求、服务端持续吐 token"，单向即可，SSE 天然契合，还能复用 HTTP 基础设施，不用额外维护长连接状态。

## 二、后端：把大模型流转成 SSE 报文

大模型 API 本身支持 stream 模式，返回的是一个个 chunk。后端要做的是把这些 chunk 按 SSE 协议格式转发给前端。

```txt
SSE 报文格式（每条消息以两个换行结尾）：
data: {"content":"你"}\n\n
data: {"content":"好"}\n\n
data: [DONE]\n\n

后端关键配置：
1. 响应头：
   Content-Type: text/event-stream; charset=utf-8
   Cache-Control: no-cache
   Connection: keep-alive
   X-Accel-Buffering: no   ← 关键！关闭Nginx缓冲，否则会攒一批才发
2. 大模型请求带 stream=true，逐 chunk 读取
3. 每收到一个 chunk 立即 flush 到响应流，不要等攒够
4. 全部结束发 data: [DONE]
```

踩坑提醒：最容易忽略的是中间层缓冲。Nginx 默认会缓冲响应，导致前端还是"一批一批"收到而不是逐字。必须加 `X-Accel-Buffering: no`，同时检查 gzip 是否也在缓冲。

## 三、前端：逐字渲染与打字机效果

前端用 EventSource 或 fetch + ReadableStream 接收。大模型场景需要自定义请求头（带 token），EventSource 不支持自定义 header，所以更常用 fetch 流式读取。

```txt
前端读取流程：
1. fetch 发起 POST，拿到 response.body（ReadableStream）
2. const reader = response.body.getReader()
3. TextDecoder 流式解码，按 \n\n 切分 SSE 帧
4. 每帧去掉 data: 前缀，解析 JSON，取出 content 拼到界面
5. 收到 [DONE] 关闭 reader

渲染优化：
- 用 requestAnimationFrame 批量刷新 DOM，
  而不是每个 token 都 setState（高频 token 会卡顿）
- 维护一个缓冲区，每帧（约16ms）把缓冲内容一次性追加
- 光标加个闪烁动画，强化"正在输入"的感知
```

解码时要注意 UTF-8 字符可能被 TCP 分包截断（一个汉字 3 字节，可能拆成两个 chunk），必须用 TextDecoder 的 stream 模式（`decoder.decode(chunk, {stream:true})`），否则会出现乱码。

## 四、断流重连与异常兜底

长连接随时可能断：网络抖动、网关超时、大模型服务波动。必须有兜底，否则用户看到一半文字戛然而止。

```txt
三层兜底：
1. 心跳保活：服务端每 15 秒发一行注释帧 ":keepalive\n\n"
   （SSE 中冒号开头是注释，前端忽略），防止网关因空闲掐断连接
2. 断线重连：前端检测到流异常中断且未收到 [DONE]，
   自动重连，带上已接收内容长度，后端从断点续传
   （大模型支持 seed + 前缀续写，或直接重新请求并截断已收部分）
3. 超时兜底：设置总超时（如60秒），超时仍未结束则提示
   "生成中断，点击重试"，并保留已生成内容，不白屏
```

网关超时配置也要对齐：Nginx 的 proxy_read_timeout、负载均衡的空闲超时都要大于心跳间隔，通常设到 120 秒。

## 五、踩坑清单（这 5 个坑都踩过）

1. 没关 Nginx 缓冲，前端还是整段蹦出，加 X-Accel-Buffering:no 并关掉该路径 gzip 后才真正逐字
2. 直接用 EventSource 但要带 Authorization 头带不上，改用 fetch + ReadableStream 解决
3. TextDecoder 没用 stream 模式，汉字被分包截断出现乱码，开启 {stream:true} 后正常
4. 每个 token 都 setState 重渲染，长文本时页面掉帧，改成 requestAnimationFrame 批量追加后流畅
5. 没做心跳，云网关 30 秒空闲就断流，加 15 秒 keepalive 注释帧后再没莫名中断

这次对话功能是搭在乔拓云的轻应用产品上的，对话页面在它的后台搭建，我主要负责后端 SSE 流式转发、前端逐字渲染和断流重连这三块，改完后首字延迟从 8 秒压到 0.6 秒，重复提交率降了八成。

## 复盘要点

1. 大模型流式输出用 SSE 足够，单向场景不必上 WebSocket
2. 逐字体验的关键在"关闭一切中间缓冲"+ 前端批量渲染
3. 心跳保活、断线续传、超时兜底三件套缺一不可

以上是个人实践记录，各平台具体功能以官方实时信息为准。

开放问题：你们做大模型流式输出时，断流续传是用前缀续写还是整段重跑？哪种体验更平滑？


上个月给客户的轻应用接大模型对话，第一版是"一次性返回"：用户点发送，界面转圈 8 秒，然后整段答案"啪"地蹦出来。测试用户普遍以为卡死了，重复点发送，后端一下堆了一堆重复请求。改成 SSE 流式输出后，首字延迟从 8 秒压到 0.6 秒，用户感知上"AI 一直在说话"，重复提交率降了八成。这篇把流式输出从后端到前端的配置过程记下来。

告别AI回复干等：SSE流式输出、断流重连与逐字渲染的配置实践

记录大模型SSE流式输出配置：响应头与Nginx缓冲、fetch流式读取逐字渲染、心跳保活与断流重连，含5个踩坑案例。

后端

人工智能

客户端

告别AI回复干等，本实践详解SSE流式输出配置，首字延迟从8秒降至0.6秒。覆盖后端SSE报文转换、前端逐字渲染优化，重点解决Nginx缓冲、UTF-8截断乱码等5大坑。包含心跳保活、断线重连、超时兜底三层机制，有效降低80%重复提交。教你从零实现流畅的AI对话流式体验。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

告别AI回复干等：SSE流式输出、断流重连与逐字渲染的配置实践-腾讯云开发者社区-腾讯云

告别AI回复干等：SSE流式输出、断流重连与逐字渲染的配置实践

告别AI回复干等：SSE流式输出、断流重连与逐字渲染的配置实践

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐