流式输出：打字机是怎么来的——SSE、首字延迟与前后端实现

① 小白第一课怎么学（4 步走，约 65 分钟）

这一课是工程落地课，重点看懂"字是怎么一个一个到屏幕上的"。

② 一图看懂：一次性返回 vs 流式返回

③ 本质直觉：把"挤牙膏"变成"水龙头"

先想清楚：模型本来就是一个 token 一个 token 吐的（第12课）。既然它是逐字生成的，为什么要等全部生成完才返回？完全可以生成一个字就推一个字。流式输出不是让模型变快，而是让它"边想边说"，用户的等待感受大幅提前。

为什么 TTFT 最重要？用户体感里"卡不卡"主要看第一个字多快出来。如果首字只要 0.3 秒，后面就算慢慢蹦，用户也觉得"它在认真回答"；如果首字要等 5 秒，哪怕后面飞速，用户早以为网页崩了。所以流式的核心价值就是把 TTFT 变得很短。

用什么技术推送？答案是 SSE（Server-Sent Events）——一个基于 HTTP、服务器单向持续推送的老协议。注意它和 WebSocket 不一样：SSE 是服务器→浏览器单向，文本流，正好契合"AI 不停往外吐字"的场景，比 WebSocket 简单。

④ 完整体系：SSE 协议与请求格式

开启流式的请求

在 OpenAI 兼容接口里，请求体加一个 "stream": true：

curl -N http://localhost:8080/v1/chat/completions \
  -H "Content-Type: application/json" \
  -d '{
    "model": "qwen2.5",
    "messages": [{"role":"user","content":"讲个笑话"}],
    "stream": true
  }'

注意 curl 要加 -N（禁用缓冲），否则你会看到攒一批才刷出来。

服务器返回的 SSE 长这样

data: {"choices":[{"delta":{"content":"为"}}]}

data: {"choices":[{"delta":{"content":"什"}}]}

data: {"choices":[{"delta":{"content":"么"}}]}

data: [DONE]

⑤ 前后端实现：fetch ReadableStream / EventSource / TTS 联动

方式一：fetch + ReadableStream（推荐，POST 请求）

const resp = await fetch('/v1/chat/completions', {
  method: 'POST',
  headers: {'Content-Type':'application/json'},
  body: JSON.stringify({model:'qwen2.5', messages:[...], stream:true})
});
const reader = resp.body.getReader();
const decoder = new TextDecoder();
while (true) {
  const {done, value} = await reader.read();
  if (done) break;
  // value 是字节流，按 data: 行解析，把 delta.content 追加到页面
  processChunk(decoder.decode(value, {stream:true}));
}

聊天接口是 POST（要带 messages 请求体），而浏览器原生 EventSource 只支持 GET，所以实战中多用 fetch 读 ReadableStream，自己切分 data: 行。

方式二：EventSource（GET 的简单场景）

const es = new EventSource('/sse-feed');
es.onmessage = (e) => {
  if (e.data === '[DONE]') { es.close(); return; }
  const chunk = JSON.parse(e.data);
  append(chunk.choices[0].delta.content);
};

EventSource 自动帮你处理 data: 行和重连，但只支持 GET、不能发 POST body，所以一般只用于简单推送，聊天接口仍首选 fetch 流。

和 TTS（文字转语音）联动

这是流式最爽的组合：模型一边吐字，一边把吐出来的字丢给 TTS 去念，不用等整篇写完。用户几乎立刻听到声音，文字和语音同步往外冒。实现上就是在上面的 append() 里，除了把字加到屏幕，还把这一小段文本喂给 TTS 播放队列。

⑥ 高频错误诊断（4 条）

⑦ 考点真题演练（4 题）

考点分布

⑧ 必背知识点卡

⑨ 应用输出：手写一个最小打字机前端

⑪ 记忆口诀 + 7 天复习计划