把结果送到前端有两种方式：

所以流式输出不是额外技术，它只是把模型本来就逐字产生的结果，逐字转发给前端而已。老实说，

为什么值得做的观点是。TTFT 才是体验的命门

衡量流式体验的关键指标叫 TTFT——从使用者点击按钮到屏幕上出现第一个字所耗时间。

• 说到非流式。TTFT 等于整段生成时间，可能需要数秒。
• 至于流式，TTFT 常常只有几百毫秒。第一个字几乎瞬间出现，让使用者立刻感知程序已经开始工作。

Total 耗时可能相同，但体感天差地别。

为什么不是 WebSocket

至于SSE，服务器单向推送的“够用就好”方案

SSE是一种基于普通 HTTP 的单向、持续推送数据**技术。它不需要额外握手升级，也不需要专门维护连接。

A I 流式输出的数据流向是：使用者一次普通 POST 请求提问后服务器源源不断把生成的 token 推回来。这是典型单向**场景。 WebSocket 的双向能力在这里并无用武之地，只会带来额外心跳保活和连接管理成本。SSE 用一条 HTTP 响应即可搞定，更加轻量。

SSE 的数据长什么样

SSE 返回的是纯文本。每行以 data: # 开头，后面跟 JSON 增量；行之间用空行 ) 分隔，最终以 data: # 表示结束。再看例如，

data: {"choices":}
至于data，{"choices":}
从data来看，{"choices":}
从data来看。

Pitfall: JSON 中只有 delta.content# 是本次新增字符，需要前端自行拼接成完整答案。

🔒 第 3 章：前端怎么收——为什么是 fetch 而不是 EventSource

先解决那个“为什么不用 EventSource”

The built‑in EventSource API can only send **GET** requests and cannot set custom headers or a request body—both are mandatory for calling LLM APIs . Hence most projects use **fetch + ReadableStream** to manually read SSE payload.

📎 顺便一提：EventSource 本来怎么用？

const es = new EventSource
es.onmessage = => {
if { es.close;return }
console.log
}
es.onerror = => console.error

The API is concise but limited to GET without custom headers—so it’s unsuitable for LLM calls.

手动读流三件套：getReader + TextDecoder + 解析

• response.body.getReader# 拿到读取器，可循环调用 read# 获取 Uint8Array 块；
• TextDecoder# 将二进制块解码为字符串；
• 手动按 SSE 格式拆分并解析 JSON 增量。

下面是一段可直接在浏览器控制台跑通的演示代码：

// 在浏览器控制台运行
const API_KEY = 'YOUR_API_KEY'
async function testStream {
const response = await fetch('https://api.deepseek.com/chat/completions',{
method这方面，'POST',headers: {
'Content-Type': 'application/json','Authorization': `Bearer ${API_KEY}`
}。body这方面，JSON.stringify({
model的观点是，'deepseek-chat',messages:,stream: true
})
})
const reader = response.body.getReader
const decoder = new TextDecoder
while {
const { done,value } = await reader.read
if break
const chunk = decoder.decode
const lines = chunk.split.filter)
for {
const data = line.replace.trim
if { console.log;continue }
try {
const json = JSON.parse
const content = json.choices?.，.delta?.content
if console.log
} catch{ /* 忽略半包 */ }
}
}
}
testStream

⚠️ 必须加上 {stream:true}# 参数。否则返回的是一次性完整响应，不会触发逐块读取。

🔗 第 4 章：封装成一个“只吐字”的函数

目标 —— 数据接收与 UI 完全解耦

// stream.js —— 与框架无关，只负责读取 & 解析 SSE
export async function streamChat {
const response = await fetch('https://api.deepseek.com/chat/completions',{
说到method，'POST',headers:{
'Content-Type':'application/json','Authorization':`Bearer YOUR_API_KEY`
至于},body，JSON.stringify({
再看model，'deepseek-chat',messages:。stream:true
}),signal // 用于 abort
})
if throw new Error
const reader = response.body.getReader
const decoder = new TextDecoder
let buffer='' // 跨轮次缓冲区
let full='' // 累计全文
while {
const {done,value}=await reader.read
if break
buffer+=decoder.decode
// 按行拆分，保留可能不完整的一行到下一轮
const lines=buffer.split
buffer=lines.pop // 半截留着
for{
if) continue
const raw=line.slice.trim
if continue
try{
const delta=JSON.parse.choices?.，.delta?.content
if{
full+=delta
onChunk // 回调外部渲染层
}
}catch{
// 若仍然解析失败则忽略——这里已经尽力避免粘包丢字
}
}
}
// 循环结束后可能还有残余未处理行
if.startsWith){
try{
const raw=buffer.trim.slice
if{
const delta=JSON.parse.choices?.，.delta?.content
if{ full+=delta;onChunk}
}
}catch{}
}
return full // 返回最终完整答案
}

This function works with any framework: In plain HTML you’ll directly manipulate DOM inside callback;不过，in Vue/React you simply update a state variable.

🖉 第 5 章：打字机效果——渲染 + 光标

主要思路 —— 根据数据调整天然就是打字机