Fetch ReadableStream 与 React 打字机优化 ChatGPT 式对话页：真实 Qwen 流式输出 + 可配置打字机（Naive / rAF），配置在右侧 drawer。 精选 实验
← 项目展示 
Fetch ReadableStream 与 React 打字机优化
ChatGPT 式对话页：真实 Qwen 流式输出 + 可配置打字机（Naive / rAF），配置在右侧 drawer。
在线预览
全屏打开
简介
对话页模拟日常 Chat 体验：底部输入、消息气泡、流式助手回复。底层仍是：
fetch → response.body.getReader() → TextDecoder({ stream: true }) 边收边展示。
打字机相关配置点右上角「配置」打开 drawer：
- Naive：每个网络 chunk 都
setState（commits ≈ reads）。 - rAF 批处理：chunk 先写入 buffer，用
requestAnimationFrame合并到每帧最多一次 React 更新。
数据源：
- 真实模型（默认）：
POST /api/demo/chat-stream，api2 代理 DashScope/Qwen，把上游 SSE 转成text/plain增量流。 - 本地 mock：浏览器内构造
ReadableStream，可用 token 间隔拉开 Naive / rAF 对比。
注意：TalkingHead 使用的
POST /api/demo/llm-stream是整包 JSON 数字人协议，与本 demo 的 chat 流式接口分离。
如何测试验证
- 打开 Demo，直接提问或点建议卡片；助手气泡应逐字增长。
- Network 确认
chat-stream为text/plain且分块到达。 - 点「配置」打开 drawer，切到「Naive」，再用「本地 mock」+ 间隔
5ms跑一轮：commits 接近 reads。 - 改回「rAF」：commits 应明显更少。
- 生成中点停止按钮，确认
AbortController能停流。