欢迎光临
我们一直在努力

从零实现支持流式输出的 AI Chat 系统

为什么流式输出如此重要?

用户最讨厌的体验:

点击发送。

等待十秒。

一次性返回。

这种体验非常差。

现代 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

上下文

缓存

状态管理

成本控制

这些能力共同组成。

赞(0)
未经允许不得转载:X记录空间 » 从零实现支持流式输出的 AI Chat 系统