一、前端
1.首先我们直观流的接收，后面再来流的中断
// 创建一个新的 AbortControllerconst controller = new AbortController();setAbortController(controller); // 保存控制器以便之后使用const responseStream: any = await fetch("你的后端地址url",{method: "POST", // 请求方法headers: {"Content-Type": "application/json", // 根据需要设置其他头部Authorization: `Bearer ${localStorage.getItem("accessToken")}`, // 携带 token},body: JSON.stringify(content), // 将复杂的参数对象转换为 JSON 字符串signal: controller.signal, // 将取消信号传递给请求});2. 其中signal为前端客户端中断流连接请求的信号
3.判断流是否ok
if (!responseStream.ok) {throw new Error("Network response was not ok");}4.创建流的接收
const reader = responseStream.body.getReader();const decoder = new TextDecoder();let done = false;//流是否接收完的标志let result = "";//拼接流5.流的循环展示
while (!done) { // 持续读取流数据，直到完成const { value, done: readerDone } = await reader.read();done = readerDone;doneRef.current = done;//后面要用到中断流请求的参数result += decoder.decode(value, { stream: true });//此处之后可以进行你需要的逻辑操作//result 是一个流传输的数据，会不断接收后端传过来的数据}6.如果想要实现流传输的中断
const stopStream = () => {doneRef.current = true;if (abortController) {abortController.abort(); // 取消请求doneRef.current = true;}};
7.先在你要中断流的函数中编辑 其中 abortController为你创建流式的中断器 即
const controller = new AbortController();
setAbortController(controller); // 保存控制器以便之后使用
8.在react中 abortController
const [abortController, setAbortController]: any = useState(null);
二、后端
1.设置响应头
// 设置响应头，支持流式传输res.setHeader("Content-Type", "text/event-stream");res.setHeader("Transfer-Encoding", "chunked");2.监听客户端中断请求
let isRequestAborted = false;// 监听客户端中断请求res.on("close", () => {if (!res.writableFinished) {console.log("客户端中断了请求");isRequestAborted = true;res.end();}});3.创造流式
// 调用流式 APIconst stream = await openai.chat.completions.create({messages: AllChatList,model: "xxxxxxxxx",stream: true, // 启用流式响应});4.发送数据
let aiResponse = ""; // 用于存储完整的 AI 响应let IsStop = 0;// 逐块发送数据给前端for await (const chunk of stream) {if (isRequestAborted) {// 如果客户端中断了请求，停止发送数据console.log("请求已中断，停止流式传输");IsStop = 1;break;}const content = chunk.choices[0]?.delta?.content || "";aiResponse += content; // 逐步收集 AI 的响应内容res.write(content); // 将数据块发送给前端}// 结束响应res.end();
