为什么流式输出如此重要?
用户最讨厌的体验:
点击发送。
等待十秒。
一次性返回。
这种体验非常差。
现代 AI 产品:
ChatGPT
Claude
Gemini
几乎都采用 Streaming。
用户能够看到:
逐字输出。
体验明显更好。
整体架构
推荐:
Browser
↓
Nginx
↓
Node
↓
Redis
↓
OpenAI
其中:
SSE(Server Sent Events)
负责流式传输。
为什么选择 SSE?
相比 WebSocket:
SSE 更简单。
天然支持:
单向输出。
非常适合 AI。
浏览器支持也更好。
服务端流程
用户发送:
question
↓
创建 session
↓
请求 OpenAI
↓
逐 token 接收
↓
实时返回浏览器
↓
保存对话
整个过程形成完整闭环。
为什么不能一次性输出?
原因:
用户等待时间太长。
尤其:
长回答。
可能:
30 秒以上。
Streaming 能够把:
TTFB
从:
10 秒
降低到:
1 秒以内。
用户体验会大幅提升。
SSE 最大的坑
Nginx 默认:
proxy_buffering on
结果:
内容全部缓存。
最后一次性返回。
解决方案:
关闭 buffering。
上下文如何管理?
不要每次:
读取全部历史记录。
推荐:
Redis 保存:
最近 20 条消息。
老消息做摘要。
否则 token 成本会不断增加。
如何支持重新生成?
建议:
message id
parent id
形成树结构。
类似 ChatGPT。
而不是简单数组。
这样:
重新生成
编辑消息
都会更加容易。
如何支持停止生成?
用户点击:
Stop。
服务端需要:
AbortController
终止请求。
否则模型还在继续消耗 token。
推荐技术栈
前端:
React
Vue
Next.js
后端:
Node.js
Redis
OpenAI
部署:
Docker
Nginx
Cloudflare
总结
一个优秀 AI Chat 系统。
核心不是聊天窗口。
而是:
Streaming
上下文
缓存
状态管理
成本控制
这些能力共同组成。
X记录空间