核心内容摘要
从0开始玩转深度学习，PyTorch镜像让训练变得超轻松
全栈 AI Chatbot 实战从后端流式转发到前端即时响应在当今 AI 驱动的应用开发中构建一个类似 ChatGPT 的对话界面已成为“Hello World”级别的必修课。
然而要实现一个丝滑的、具备打字机效果的聊天机器人并非简单的 API 调用而是涉及 前后端流式数据传输Streaming 、 服务端代理Proxying 以及 前端状态管理 的综合工程。
本文将通过模块化的方式拆解一个全栈 AI Chatbot 的核心实现流程带你深入理解数据是如何从 DeepSeek 大模型流向用户屏幕的。
后端部分Mock 模拟后端的职责非常明确它是一个“流式代理中间件”。
它需要同时维护两条连接左手与前端保持长连接右手与大模型保持流式连接并在中间进行数据的清洗和格式转换。
定义路由以及处理请求当用户向 Chatbot 发送请求时后端需要接收前端的请求体包含用户消息并将其转发给大模型。
import { config } from dotenv config(); export default [ { url: /api/ai/chat, method: post, rawResponse: async (req, res) { let body ; req.on(data, (chunk) { body chunk }) req.on(end, async () { try { const { messages } JSON.parse(body); // ... 后续逻辑 } catch (err) { res.end(); } }) } } ]核心代码与逻辑rawResponse使用rawResponse就像是从“自动挡”切换到了“手动挡”。
虽然你需要自己处理req.on(data)和res.end()等底层琐事但它给了你控制时间的能力——让你能够决定什么时候发送数据以及分多少次发送数据。
这正是实现打字机效果的唯一途径。
req.on()这就是一个监听事件data事件当请求体有数据到达时触发。
这里每当有数据传输就进行拼接。
end事件当请求体数据接收完毕时触发。
表示用户的问题已经接收完全可以开始调用大模型了。
res.end()因为我们使用rawResponse获得了绝对的控制权所以当大模型返回完所有数据后需要手动调用res.end()来结束响应。
通过字符串拼接将二进制数据转化为字符串因此可以通过JSON.parse(body)将字符串解析为 JSON 对象。
流式调用大模型 API这里负责调用大模型的 API获取流式响应。
// ... 在 req.on(end) 内部 res.setHeader(Content-Type, text/plain;charsetutf-
res.setHeader(Transfer-Encoding, chunked) res.setHeader(x-vercel-ai-data-stream, v
const response await fetch(https://api.deepseek.com/v1/chat/completions, { method: post, headers: { Content-Type: application/json, Authorization: Bearer ${process.env.VITE_DEEPSEEK_API_KEY} }, body: JSON.stringify({ model: deepseek-chat, messages: messages, stream: true }) });核心代码与逻辑三个res.setHeaderContent-Type: text/plain;charsetutf-8作用声明货物类型。
解释告诉浏览器“我发给你的是纯文本不是 HTML 网页也不是图片”。
如果不写charsetutf-8中文可能会变成乱码。
Transfer-Encoding: chunked作用声明发货方式分批次。
解释这是流式传输的开关。
它告诉浏览器“这个包裹太大或者我还没生产完我无法在发货前告诉你总重量Content-Length。
我会切成一块一块地发给你直到我说发完了为止。
”后果如果不写这个浏览器可能会一直等到服务器把所有数据都准备好res.end才开始显示内容那就没有打字机效果了。
x-vercel-ai-data-stream: v1作用对暗号。
解释这是前端使用的 Vercel AI SDKuseChat特有的自定义协议头。
前端 SDK 收到响应时会检查有没有这个头。
如果有它就知道“哦这是自家兄弟发的流式数据格式我懂0:xxx我可以自动解析它。
”后果如果不写前端 SDK 可能会认为这是一个普通的文本响应导致无法正确解析流内容或者报错。
const response await fetch(...)调用大模型 API。
SSE 数据清洗与实时转发将大模型回复生成的数据进行流式的清洗与转发。
// ... 接上文 const reader response.body.getReader(); const decoder new TextDecoder(); while (true) { const { done, value } await reader.read(); if (done) break; const chunk decoder.decode(value); const lines chunk.split(\n); for (let line of lines) { if (line.startsWith(data: ) line ! data: [DONE]) { try { const data JSON.parse(line.slice(
); const content data.choices[0]?.delta?.content || ; if (content) { res.write(0:${JSON.stringify(content)}\n) } } catch (err) {} } } }核心代码与逻辑const reader response.body.getReader();用于流式读取数据的对象。
const decoder new TextDecoder();因为大模型返回的是二进制数据所以需要使用TextDecoder来将其解码为文本。
const { done, value } await reader.read();每次读取数据块done表示是否读取完毕value表示读取到的二进制数据。
const chunk decoder.decode(value);const lines chunk.split(\n);将每次读取的数据块进行解码与分块。
for(){...}—— 数据的清洗通过解码我们已经能够拿到数据但是要想像聊天一样获得纯文本就必须经过数据清洗if (line.startsWith(data: ) line ! data: [DONE])大模型返回的每个数据块以data:开头代表的就是我们需要的数据当输出[data: [DONE]]时代表大模型已经返回完所有数据。
通过条件判断当前数据块是我们的有效数据。
const data JSON.parse(line.slice(
);切割掉每条数据前的data:将剩余的字符串解析为 JSON 对象。
const content data.choices[0]?.delta?.content || ;拿到每次新增的内容字段delta.content。
res.write(0:${JSON.stringify(content)}\n)将新增的字段内容转发给前端。
前端部分这里负责接收后端转发的流式数据并将其显示在前端的聊天框中。
useChatuseChat是 Vercel AI SDK 提供的一个 React 钩子函数用于在 React 组件中调用大模型 API 并处理流式响应。
import { useChat } from ai-sdk/react export const useChatbot () { return useChat({ api: /api/ai/chat, onError: (err) { console.error(Chat Error:, err); } }) }它带来的便利主要体现在以下三个方面
自动化的状态管理省去了手动维护数组痛点如果不使用useChat你需要自己创建一个messages数组状态。
每当用户发消息你要手动push进去每当 AI 回复你又要手动更新最后一条消息。
便利useChat自动维护messages。
用户发消息 → 自动追加到列表。
AI 流式回复 → 自动拼接到最后一条消息里无需你写任何拼接逻辑。
封装了复杂的流式网络请求省去了手写fetch和reader痛点手动处理流式响应非常麻烦。
你需要写fetch获取reader写while循环读取流用TextDecoder解码还要处理 JSON 解析和错误。
便利useChat内部已经写好了全套的流处理逻辑。
你只需要配置一个api: /api/ai/chat。
它会自动发起请求自动监听数据流自动解析后端发来的0:xxx格式。
开箱即用的 UI 交互逻辑省去了写受控组件痛点你需要自己处理输入框的onChange自己处理表单的onSubmit还要防止用户在生成过程中重复点击发送。
便利提供input和handleInputChange直接绑定到输入框实现双向绑定。
提供handleSubmit直接绑定到表单自动处理提交。
提供isLoading自动告诉你 AI 是否正在生成方便你禁用按钮或显示 Loading 动画。
UI 交互与渲染通过 Vercel AI SDK 提供的useChat钩子函数我们可以很方便地实现聊天界面的交互与渲染。
我们只需要关心页面设计其他的都交给useChat打理。
import { useChatbot } from /hooks/useChatBot; // ... UI 组件导入 export default function Chat() { const { messages, input, handleInputChange, handleSubmit, isLoading } useChatbot(); const onSubmit (e: React.FormEvent) { e.preventDefault(); if (!input.trim()) return; handleSubmit(e); } return ( div className... {/* 消息列表区域 */} ScrollArea className... {messages.map((m, idx) ( div key{idx} className{flex ${m.role user ? justify-end : justify-start}} div className{... ${m.role user ? bg-primary : bg-muted}} {m.content} /div /div ))} /ScrollArea {/* 输入区域 */} form onSubmit{onSubmit} classNameflex gap-2 Input value{input} onChange{handleInputChange} disabled{isLoading} / Button typesubmit disabled{isLoading}Send/Button /form /div ) }核心代码和逻辑Optimistic UI乐观更新当你调用handleSubmit的瞬间你的消息就会立即出现在messages列表中无需等待服务器响应。
这提供了极佳的流畅感。
数据驱动视图注意看{m.content}这一行。
我们没有写任何定时器或手动 DOM 操作来实现打字机效果。
一切都是响应式的后端推来一个字 → SDK 更新messages状态 → React 检测到状态变化 → 重新渲染组件 → 界面上多出一个字。
受控组件Input的value和onChange直接绑定了 SDK 提供的input和handleInputChange。
这意味着输入框的状态管理权也完全移交给了 SDK减少了我们自己写useState的冗余代码。
总结数据流的全景图构建这个 AI Chatbot本质上是搭建了一条从用户到 AI 再回到用户的高速数据管道触发用户点击发送useChat携带历史消息发起请求。
中转后端req.on接收数据向 DeepSeek 发起stream: true的请求。
生成DeepSeek 逐个生成 Token。
清洗后端reader截获 Token去除 SSE 外壳。
推送后端res.write将 Token 实时推回前端。
渲染前端 SDK 接收 Token更新状态React 刷新界面。
通过这种模块化、分层的设计我们不仅实现了酷炫的打字机效果更保证了系统的可维护性和扩展性。
学习资源推荐如果你想更深入地学习大模型以下是一些非常有价值的学习资源这些资源将帮助你从不同角度学习大模型提升你的实践能力。
全套AGI大模型学习路线AI大模型时代的学习之旅从基础到前沿掌握人工智能的核心技能因篇幅有限仅展示部分资料需要点击文章最下方名片即可前往获取
640套AI大模型报告合集这套包含640份报告的合集涵盖了AI大模型的理论研究、技术实现、行业应用等多个方面。
无论您是科研人员、工程师还是对AI大模型感兴趣的爱好者这套报告合集都将为您提供宝贵的信息和启示因篇幅有限仅展示部分资料需要点击文章最下方名片即可前往获取
AI大模型经典PDF籍随着人工智能技术的飞速发展AI大模型已经成为了当今科技领域的一大热点。
这些大型预训练模型如GPT-
BERT、XLNet等以其强大的语言理解和生成能力正在改变我们对人工智能的认识。
那以下这些PDF籍就是非常不错的学习资源。
因篇幅有限仅展示部分资料需要点击文章最下方名片即可前往获取