前端对话框项目 react如何实时接收，Node.js 服务端转发Coze API响应结果详解
前端JS请求coze api并流式展示
01思路分析
用户现在的问题是如何将coze API返回的流式响应展示出来。之前已经帮忙封装了axios请求，现在需要处理流式数据。我需要回想一下流式请求的处理方式，通常SSE（Server-Sent Events）或者使用fetch的流式读取，但用户使用的是axios，可能需要配置responseType为stream或者处理分块数据。
首先，用户之前的代码中设置了stream: true，这可能意味着API返回的是流式数据，比如每个chunk逐步返回。但axios默认情况下可能不会处理这种流式响应，可能需要调整配置。例如，使用fetch的话，可以监听chunk，但axios是否支持呢？
根据之前的知识，处理流式响应通常可以使用EventSource，但需要服务器支持SSE。如果API返回的是普通的分块数据流，可能需要使用responseType: ‘stream’（在Node.js中）或者在前端使用ReadableStream。不过在前端浏览器环境中，axios可能无法直接处理流式数据，或者需要特定的配置。
用户现在用的是浏览器环境吗？假设是前端项目，比如Vue或React。这时候可能需要使用fetch API，因为fetch可以处理流式数据，而axios在这方面的支持可能有限。或者，检查coze的API文档，确认流式返回的数据格式，比如是否每个chunk是一个JSON对象或特定格式的数据。
例如，如果API使用SSE，每个事件是一个数据块，那么在前端应该使用EventSource来监听事件。但如果API是普通的流式HTTP响应，分块发送数据，那么可能需要使用fetch并逐步读取响应体。
在用户之前的封装中，使用的是axios.post，并且设置了stream: true。但可能没有正确配置axios来处理流式响应。因此，可能需要改用fetch，或者调整axios的配置，比如设置responseType为’stream’（但浏览器中可能不支持），或者使用onDownloadProgress回调来处理接收到的数据片段。
查阅资料发现，axios在浏览器中的responseType支持’arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’（stream仅在Node.js环境中有效）。因此，在浏览器中，可能无法直接使用stream类型。这时可能需要使用text类型，并手动处理分块数据。但这种方式可能不可靠，因为axios会等待整个响应完成后再触发then。
因此，正确的做法应该是使用fetch API，因为fetch支持流式读取响应体。例如，使用fetch并设置body为可读流，然后通过reader来逐步读取数据。
或者，如果服务器支持SSE，则使用EventSource。但需要确认coze的API是否使用SSE格式，即返回的数据格式是否符合text/event-stream，并且每个事件由开头。
假设用户需要处理的是普通的流式JSON数据，每个chunk是一个JSON对象，那么可能需要使用fetch来获取响应体，并通过读取器逐步处理数据块。
总结处理步骤：
- 使用fetch代替axios，因为fetch支持流式读取。
- 设置请求参数，包括method: ‘POST’, headers, body等。
- 读取响应体流，使用ReadableStream.getReader()。
- 循环读取每个chunk，处理并更新UI。
接下来需要编写示例代码，展示如何发起请求并处理流式响应，逐步将数据展示在页面上。同时，注意处理文本的拼接和解析，特别是如果每个chunk可能包含部分数据，需要正确拼接成完整的JSON对象或文本内容。
可能的实现方式：
- 使用fetch发起POST请求。
- 获取响应体的reader。
- 创建解码器来处理Uint8Array数据为文本。
- 循环读取chunk，直到done为true。
- 处理每个chunk的文本，可能按特定分隔符（如\n\n）分割，解析每个事件的数据。
如果coze的API返回的是类似OpenAI的流式响应，每个chunk是一个{…}\n\n的结构，那么需要按行分割处理。
最后，将处理后的数据逐步显示在页面上，比如通过React的state更新，或者直接操作DOM。
在代码中，需要注意错误处理，比如网络错误或流读取中的错误，以及如何中止请求（例如用户取消操作）。
现在，将这些思路整理成步骤化的解答，并提供示例代码，指导用户如何修改之前的封装以支持流式展示。
要实现从 coze API 获取流式数据并实时展示，可以使用 fetch API 处理流式响应，逐步读取并渲染数据。以下是完整实现方案：
// 封装流式请求方法
export const streamRequestTxt = async (content: string, onDataReceived: (string) => void) => {
try {
const response = await fetch('https://api.coze.cn/v3/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer pat_4cFLXH9NmmysAeyFMSVrZJXzCP8FywZlIqWWFFrQSS4x5DpYxXqmBXLfjzUmU242'
},
body: JSON.stringify({
bot_id: "7472376009968042021",
user_id: "123456",
stream: true,
auto_save_history: true,
additional_messages: [{
role: "user",
content: content,
content_type: "text"
}]
})
});
// 处理非200响应
if (!response.ok) {
throw new Error(`HTTP error! status: ${
response.status}`);
}
// 获取可读流和读取器
const reader = response.body?.getReader();
const decoder = new TextDecoder('utf-8');
let partialData = '';
if (!reader) return;
// 持续读取流数据
while (true) {
const {
done, value } = await reader.read();
if (done) break;
// 解码并处理数据块
const chunk = decoder.decode(value, {
stream: true });
partialData += chunk;
// 处理可能的多个事件（按换行分割）
const lines = partialData.split('\n');
partialData = lines.pop() || ''; // 保留未完成的行
for (const line of lines) {
if (line.startsWith('')) {
const jsonData = line.replace('', '');
try {
const parsed = JSON.parse(jsonData);
if (parsed.content) {
onDataReceived(parsed.content); // 触发回调更新UI
}
} catch (e) {
console.error('JSON解析失败:', e);
}
}
}
}
} catch (error) {
console.error('流式请求失败:', error);
throw error; // 向上传递错误
}
};
React 组件使用示例：
import { useState } from 'react';
export function ChatStream() {
const [message, setMessage] = useState('');
const [isLoading, setIsLoading] = useState(false);
const handleStream = async (input: string) => {
setIsLoading(true);
try {
await streamRequestTxt(input, (chunk) => {
setMessage(prev => prev + chunk); // 增量更新消息
});
} finally {
setIsLoading(false);
}
};
return (
<div>
<button
onClick={() => handleStream('你好')}
disabled={isLoading}
>
{isLoading ? '请求中...' : '发送流式请求'}
</button>
<div style={
{ whiteSpace: 'pre-wrap' }}>
{message}
</div>
</div>
);
}
核心实现原理：
-
流式协议处理
- 使用
fetch原生API获取可读流（ReadableStream） - 通过
TextDecoder处理二进制流为文本 - 按
\n分割数据行，处理服务端可能合并发送的多条消息
- 使用
-
数据格式解析
- 假设服务端采用
JSON格式发送事件 - 自动过滤非数据行（如心跳检测的空行）
- 使用
JSON.parse严格解析数据格式
- 假设服务端采用
-
实时渲染优化
- 通过回调函数逐块传递数据
- 前端框架中通过状态合并（如React的setState）优化渲染性能
- 保留未完成数据块实现断包续传
高级功能扩展建议：
- 中断控制
// 创建AbortController
const controller = new AbortController();
// 在fetch配置中添加
signal: controller.signal,
// 暴露中断方法
return {
abort: () => controller.abort()
};
- 性能优化
// 使用防抖渲染（每秒更新不超过60次）
let renderQueue = '';
const debouncedUpdate = useRef(debounce(() => {
setMessage(prev => prev + renderQueue);
renderQueue = '';
}, 16)).current;
// 在回调中累积数据
onDataReceived: (chunk) => {
renderQueue += chunk;
debouncedUpdate();
}
- 错误重试机制
let retries = 0;
const MAX_RETRIES = 3;
try {
// ...原有逻辑
} catch (error) {
if (retries < MAX_RETRIES) {
retries++;
await new Promise(r => setTimeout(r, 1000 * retries));
handleStream(input);
}
}
不同技术栈的适配方案：
- Vue3 Composition API
<script setup>
import { ref } from 'vue';
const message = ref('');
const isLoading = ref(false);
const handleStream = async (input) => {
isLoading.value = true;
try {
await streamRequestTxt(input, (chunk) => {
message.value += chunk;
});
} finally {
isLoading.value