Server-Sent Events（SSE）是实现 AI 流式输出的最轻量方案。相比 WebSocket，它单向、基于 HTTP、浏览器原生支持，不需要额外库。
本文分享在"领航英语"项目中用 SSE 实现 AI 单词精讲的完整实践，包括前端接收、中断、结构化解析和逐行渲染。
为什么选 SSE
| 方案 | 适用场景 | 复杂度 |
|---|---|---|
| 轮询 | 低频更新 | 低 |
| SSE | 服务端单向推送流式数据 | 低 |
| WebSocket | 双向实时通信 | 高 |
AI 文本生成是典型的单向流式场景：用户发请求，AI 逐 token 返回。SSE 完美匹配。
后端接口（Go + Gin）
Go 侧设置关键响应头：
func(h*AIService)ExplainVocabStream(c*gin.Context){c.Header("Content-Type","text/event-stream")c.Header("Cache-Control","no-cache")c.Header("Connection","keep-alive")c.Header("X-Accel-Buffering","no")// 禁用 Nginx 缓冲c.Stream(func(w io.Writer)bool{// 调用 LLM streaming APIstream:=llmClient.CreateChatCompletionStream(ctx,request)forchunk:=rangestream{fmt.Fprintf(w,"data: %s\n\n",chunk)c.Writer.Flush()}fmt.Fprintf(w,"data: [DONE]\n\n")returnfalse})}关键细节：X-Accel-Buffering: no告诉 Nginx 不要缓冲这个响应。没这行的话，Nginx 会把所有 chunk 攒到一起再发给客户端——流式变一次性，效果全没了。
前端 Fetch + ReadableStream
前端不用 EventSource API（因为它不支持 POST 请求和自定义 headers），用fetch+ReadableStream：
asyncfunctionstreamAIExplain(word:string,onChunk:(text:string)=>void){constresponse=awaitfetch('/api/ai/explain-vocab/stream',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({word})})constreader=response.body!.getReader()constdecoder=newTextDecoder()letbuffer=''while(true){const{done,value}=awaitreader.read()if(done)breakbuffer+=decoder.decode(value,{stream:true})constlines=buffer.split('\n')buffer=lines.pop()||''// 最后一部分可能不完整，留着下次拼for(constlineoflines){if(line.startsWith('data: ')){constdata=line.slice(6)if(data==='[DONE]')returnonChunk(data)}}}}要点：
TextDecoder的stream: true参数处理多字节字符被截断的情况（UTF-8 中一个中文字 3 字节，流式传输可能从中断开）- buffer 机制保证不完整的行不会丢
[DONE]信号标记流结束
中断请求
用户关掉 AI 精讲面板时，需要立即中断请求，否则浪费 token 和带宽：
constabortController=ref<AbortController|null>(null)conststartStream=async(word:string)=>{abortController.value=newAbortController()constresponse=awaitfetch('/api/ai/explain-vocab/stream',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({word}),signal:abortController.value.signal})// ...}conststopStream=()=>{abortController.value?.abort()}AbortController是浏览器原生 API，fetch 收到 abort 信号会抛出AbortError，后端也会收到连接断开通知。
结构化 JSON 解析
AI 返回的不是纯文本，而是结构化 JSON：
{"memoryTip":"词根 spect 表示"看"，pro- 表示"向前"，合起来就是向前看→前景","usage":"prospect of doing sth, in prospect","example":"The prospect of studying abroad excites her.","examNote":"注意与 perspective（视角）区分，考试中常混在一起出题"}问题是：SSE 的每个 chunk 可能在任何位置断开，而 JSON 必须完整才能解析。
解法——逐 chunk 累积，尝试解析，失败就继续收：
letjsonBuffer=''onChunk=(chunk:string)=>{jsonBuffer+=chunkletparsed:VocabExplain|null=nulltry{parsed=JSON.parse(jsonBuffer)}catch{return// JSON 还不完整，继续等}// 解析成功，按字段渲染renderField('memoryTip',parsed.memoryTip)renderField('usage',parsed.usage)renderField('example',parsed.example)renderField('examNote',parsed.examNote)}生产环境建议用更鲁棒的策略：要求 LLM 逐字段输出，每个字段标记分隔符，避免等整个 JSON 收完才开始渲染。
逐行打字效果渲染
收到字段内容后，用requestAnimationFrame实现逐字渲染：
constdisplayText=ref('')letdisplayTimer:number|null=nullfunctionanimateText(fullText:string){letindex=0constspeed=30// ms per charconsttick=()=>{if(index<fullText.length){displayText.value=fullText.slice(0,++index)displayTimer=window.requestAnimationFrame(()=>setTimeout(tick,speed))}}tick()}requestAnimationFrame保证渲染与屏幕刷新同步，不会出现卡顿和闪烁。
完整流程
用户点击 AI 精讲 → fetch POST /api/ai/explain-vocab/stream → Go 服务调用 LLM streaming API → SSE chunk 逐条返回 → 前端累积 JSON buffer → 解析成功后逐字渲染 → 用户关闭面板 → AbortController 中断这些代码来自领航英语的实际实现。在线体验：m.dobell.top，点击任意单词卡片即可看到流式 AI 精讲效果。注册送 3 天会员，月卡 29 元。
)
