react与nodejs实现流式传输，并可以进行中断（fetch聊天版）

一、前端
1.首先我们直观流的接收，后面再来流的中断

    // 创建一个新的 AbortController
      const 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.创造流式

// 调用流式 API
   const 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();