课程主线#

先看问题现场#

普通 fetch 常见写法是：

1
const data = await response.json();

但 /ai/chat 的响应不是“等完整 JSON 再回来”，而是持续发送：

1
data: {"type":"thinking","content":"..."}\n\n
2
data: {"type":"answer","content":"..."}\n\n

所以必须在浏览器中读取 body 的字节流，再逐个还原 SSE 事件。

真实代码与调用链#

• examples/frontend/stream_ai.ts：网络层，不依赖 Vue。
• examples/frontend/AiChatPanel.vue：Vue 状态和页面交互。

1
点击发送
2
  -> sendQuestion()
3
  -> streamAiChat(...)
4
  -> fetch POST /ai/chat
5
  -> reader.read() 收到 bytes
6
  -> TextDecoder 还原文本
7
  -> JSON.parse data 行
8
  -> onEvent(event)
9
  -> thinking / answer 的 ref 更新
10
  -> Vue 自动刷新页面

本章新对象#

reader.read() 不是“每次一定读到一个完整事件”。网络可在任意位置切块，故示例先追加到 buffer，只处理由空行 \n\n 结束的完整事件。

最小运行方式#

这两个文件是可复制进 Vue3 项目 src/api/ 与 src/components/ 的模板，当前 Python 项目本身没有 Vite 前端，因此不能在本仓库直接运行 Vue 页面。

把组件挂到你的 Vue 页面后：

1
<AiChatPanel api-base-url="http://127.0.0.1:8000" />

启动 FastAPI 后发送一句问题。预期现象：回答会逐段出现；点击“停止”会触发 AbortController.abort()，不再等待服务端结束。

边界#

本章读取的是已有接口的 thinking、divider、answer 三种事件。它不实现：

• 聊天记录持久化与 markdown 渲染。
• 登录 token；第 44 章的 askDifyWorkflow() 是受保护 JSON 路由的模板。
• 语音上传与播放；它们在第 46 章作为作品功能组合。

三遍练习#

1. [追踪] buffer 为什么不能直接替换成每次 decoder.decode(value) 的结果？
2. [改] 收到 divider 时把 thinking 收起或加一个“最终回答”标题。
3. [独立做] 在停止后显示“已停止生成”，但保留已收到的 answer。

常见坑#

• 对 text/event-stream 使用 response.json()。
• 假设一次 read() 就是一条完整 SSE 事件。
• 忽略 AbortError，导致用户正常停止也显示红色错误。
• 把后端模型 Key 放入 VITE_* 变量；浏览器只应请求你的后端。

课后压缩#

1
SSE 在前端 = fetch 的 body reader + TextDecoder + buffer + 状态更新。
2
停止生成 = AbortController.abort()；已收到的文本可以保留。