需改用xmlhttprequest或fetch+readablestream替代axios,手动解析sse流式响应并实时追加delta到消息内容;后端须禁用缓冲、透传原始流;前端应预置空ai消息并设超时兜底机制。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

把 Codex 的流式输出实时展示在自建聊天界面中,需要绕过 Axios 等默认等待完整响应的 HTTP 客户端,改用底层可控的 XMLHttpRequest 或 Fetch + ReadableStream,让每个 token 到达时立刻渲染到消息气泡里。
前端必须用 XMLHttpRequest 手动处理流式响应
第一步:在发送请求前,将 Axios 替换为原生 XMLHttpRequest 实例,设置 responseType 为 'stream';【不设这个值,浏览器会缓存整段响应,直到模型返回 EOF 才触发 onload】
第二步:监听 onprogress 事件,在每次收到新 chunk 时调用 parser 解析 SSE 格式(Codex 默认返回 text/event-stream);注意部分网关会省略 event: message 前缀,直接发 data: {\"delta\":\"if\"},需容错处理。
第三步:把解析出的 delta 字符串追加到当前 AI 消息的 content 字段,并强制触发 Vue/React 的 re-render;这一步不能等整个 response 结束再更新 DOM,否则就没有“打字效果”。
后端需透传 Codex 的原始流,禁止缓冲
方法一:Node.js 转发服务用 http.ServerResponse.write() 直接 write chunk,禁用 res.end() 直到 Codex 进程显式关闭流;【若提前调用 end(),前端会收不到后续 token】
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像,然后保存
方法二:Nginx 反向代理必须添加 proxy_buffering off; 和 chunked_transfer_encoding on; 否则默认缓存 4KB 才吐出,导致首屏延迟明显。
方法三:如果你用 TaoToken 做统一网关,确认其 wire_api 配置为 responses(非 chat/completions),因为只有 /v1/responses 接口才原生支持 event-stream 流式,chat/completions 接口需额外做流式包装。
消息状态与错误兜底处理
① 用户点击发送后,立即在消息列表插入一条 role="assistant"、content="" 的空消息,并标记 isStreaming=true;
② 当 XMLHttpRequest 触发 onload 且 status !== 200 时,清空当前空消息,替换成 error 提示;不要只靠 try/catch,网络中断或超时不会进 catch;
③ 如果 30 秒内未收到任何 data: 字段,主动 abort 请求并提示“模型未响应,请检查 Codex 进程是否运行”;Codex CLI 在无活跃会话时可能延迟启动子进程,这个超时是真实存在的。










