帮助中心 / 上手教程 / 做一个流式聊天界面

做一个流式聊天界面

内容版本 v2026.10.22 · 所属 上手教程 / AI 应用

概览

前端接 SSE,逐字显示,体验比等整段返回好很多。

项说明
协议SSE(text/event-stream)
要点逐块渲染 + 中断支持

操作步骤

  1. 后端透传 SSE(别缓冲)
  2. 前端用 fetch + ReadableStream 读取
  3. 按行解析 data: {...}
  4. 收到 [DONE] 结束

示例

示例
const res = await fetch("/chat", {method:"POST", body: JSON.stringify({q})});
const reader = res.body.getReader();
// 逐块 decode 并解析 data: 行

使用限制

  • 中间有 Nginx 时必须关闭 proxy_buffering

注意事项

  • 浏览器原生 EventSource 不支持 POST,用 fetch 流式读
如你还有其他疑问,可以 提交工单 或 回到帮助中心。
这篇文档对你有帮助吗?