6.【流式输出完整实战】如何实现ChatGPT逐字返回效果？（FastAPI + 前端完整方案）

一、问题场景

在做AI工具初期，我遇到一个很真实的问题：

👉 用户点击发送后，页面要等3~5秒才返回完整结果

用户反馈非常直接：

• “是不是卡了？”
• “没反应？”
• “算了不用了”

即使后端性能没问题，用户体验依然很差

二、问题分析

默认AI调用方式：

response=model.generate(prompt)returnresponse

👉 问题本质：

• 阻塞式返回
• 用户看不到“生成过程”
• 感知延迟被放大

三、解决方案

👉流式输出（Streaming Response）

核心思想：

模型生成一段 → 立刻返回一段 → 前端实时渲染

四、实操步骤（完整后端实现）

步骤1：模拟流式生成器

importtimedeffake_stream():text="这是一个流式输出的示例"forcharintext:yieldchar time.sleep(0.05)

步骤2：FastAPI返回流

fromfastapiimportFastAPIfromfastapi.responsesimportStreamingResponse app=FastAPI()@app.get("/stream")defstream():returnStreamingResponse(fake_stream(),media_type="text/plain")

步骤3：接入真实模型（关键）

defmodel_stream(prompt):forchunkinmodel.generate_stream(prompt):yieldchunk["content"]

👉 注意：不同模型SDK的stream格式不同，需要做适配

五、前端实现（核心）

asyncfunctionfetchStream(){constresponse=awaitfetch("/stream");constreader=response.body.getReader();constdecoder=newTextDecoder();letresult="";while(true){const{done,value}=awaitreader.read();if(done)break;result+=decoder.decode(value);document.getElementById("output").innerText=result;}}

六、验证结果

优化前：

• 3秒无响应 → 用户流失

优化后：

• 0.3秒出现首字
• 用户感知“秒回”

👉体验提升远大于性能优化

七、踩坑记录

1️⃣ 中文乱码问题
👉 必须使用TextDecoder

2️⃣ chunk太碎
👉 频繁渲染导致卡顿

3️⃣ 浏览器兼容
👉 Safari 对stream支持较差

八、总结

👉 流式输出不是“优化”，而是必须能力

九、进阶优化

• WebSocket替代HTTP
• 打字机动画
• chunk缓冲机制

十、下一篇预告

👉 如何设计RAG系统接入私有知识库