做一个流式聊天界面
概览
前端接 SSE,逐字显示,体验比等整段返回好很多。
| 项 | 说明 |
|---|---|
| 协议 | SSE(text/event-stream) |
| 要点 | 逐块渲染 + 中断支持 |
操作步骤
- 后端透传 SSE(别缓冲)
- 前端用 fetch + ReadableStream 读取
- 按行解析 data: {...}
- 收到 [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 流式读