← Back to all guides

React 实战：用 59API 流式输出 LLM 回复的完整工作流

为什么 React 聊天应用必须使用流式响应

普通接口会等模型生成完整答案后再返回，用户可能面对数秒空白页面。流式响应则让第一个 Token 到达后立即展示，适合客服机器人、代码助手和知识库问答。一个可靠的实现应采用React 前端 + 自己的服务端代理 + LLM API的结构：浏览器只请求你的接口，密钥永远保留在服务端。

59API 很适合这类场景。它提供按量付费的 Claude（Opus、Sonnet、Haiku、Fable）和 GPT 模型访问，可兼容 OpenAI SDK、Claude Code 与 Codex；开发者可以用较低成本接入原生官方质量模型，而不是为了省钱牺牲模型能力。

第一步：在服务端创建流式代理

不要把 59API Key 写入 React 的环境变量或打包产物。以 Node.js、Next.js Route Handler、Express 或 NestJS 为例，创建 POST /api/chat。服务端读取用户消息后，先限制消息长度、校验登录状态，再调用兼容 OpenAI 格式的聊天接口。

• 将 59API 的密钥保存为服务端环境变量，例如 API_KEY。
• 在 OpenAI SDK 中将 baseURL 配置为 https://api.59api.com，并按控制台提供的实际模型 ID 选择模型。
• 请求参数开启 stream: true，传入 messages、temperature 和 max_tokens。
• 响应头设置 Content-Type: text/event-stream; charset=utf-8、Cache-Control: no-cache，以及 X-Accel-Buffering: no，避免 Nginx 缓冲内容。

代理拿到上游流后可以直接写回浏览器，也可以逐块转换为 SSE。若使用 Chat Completions 格式，通常从每个事件的 choices[0].delta.content 读取增量文本；遇到 [DONE] 时关闭响应。服务端还应记录模型名、耗时、输入输出 Token 和错误码，方便定位慢请求与核对成本。

第二步：在 React 中读取 ReadableStream

前端发送 POST 请求时不要使用 EventSource，因为 EventSource 只支持 GET 且不方便携带复杂消息体。使用 fetch 获取 response.body，再通过 getReader 与 TextDecoder 逐段读取。每次读取后把残留字符串与新内容拼接，按空行分割 SSE 事件，提取以 data: 开头的内容，再解析 JSON。

核心状态通常包括 messages、draftAnswer、isStreaming 和 error。用户点击发送后，先把自己的消息加入 messages，将 draftAnswer 清空；随后每获得一个 delta，执行 setDraftAnswer(previous => previous + delta)。界面将 draftAnswer 作为当前助手消息渲染，因此文字会自然逐字出现。流完成后，再把完整 draftAnswer 写入 messages，避免每个 Token 都改变历史消息数组。

第三步：处理停止生成、异常与性能

为每次请求创建 AbortController，并把 controller 保存到 ref。用户点击“停止生成”时调用 abort，随后将已生成的 draftAnswer 保留为可继续编辑的内容。组件卸载时也应中止请求，防止页面切换后仍然更新状态。

• 收到 429 时提示“请求过于频繁”，并在服务端采用指数退避重试，不要让前端无限重发。
• 收到 401 或 403 时只记录服务端诊断信息，绝不把 API Key、上游完整报错或内部 URL 直接显示给用户。
• 对高频 Token 更新，可用 requestAnimationFrame 合并多次 setState，减少长答案造成的重渲染。
• 为消息设置最大字符数、最大轮数和单用户速率限制，避免上下文无限增长带来延迟和账单风险。

第四步：上线前验证真实体验

用短回答、长代码、中文混合英文和网络中断分别测试。重点检查首个 Token 时间、停止按钮是否立即生效、刷新页面后历史记录是否恢复，以及代理是否真的没有泄露密钥。生产环境还应确认 CDN、反向代理和 Serverless 平台没有缓存或缓冲 SSE 响应。

完成后，你就拥有了一个响应迅速、密钥安全且成本可控的 React 流式聊天链路。若准备接入 Claude 或 GPT，可注册 59API，按实际用量开始测试；其推荐返利机制也适合希望降低长期 API 支出的开发团队。