NextJs Build Start Production 无法接收数据 ReadableStream .getReader()

Question

我有一段代码可以与

npm run dev

完美配合，但是当我运行

npm run build

然后

npm run start

时，我没有收到数据块。我正在处理来自 OpenAI 聊天的流数据。 我记录了来自服务器的响应，似乎服务器正在发送数据但前端无法读取它。有人可以帮忙吗？

这是服务器端代码。

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

import { getChatHistory } from "./lib/createChatHist";
import { WritableStream } from "web-streams-polyfill/ponyfill";
import { getOpenAIStream } from "./lib/openAIStream";

export default async function handler(req: any, res: any) {
    const body = req.body;
    const dataForAI = body["dataForAI"];
    const md = dataForAI["metaData"];

    const { payload} = getChatHistory(dataForAI);


    // console.log("payload", payload);

    const stream: ReadableStream = await getOpenAIStream(payload);
    res.setHeader("Content-Type", "text/event-stream");
    res.setHeader("Connection", "Keep-Alive");
    res.setHeader("Cache-Control", "no-cache");

    const writableStream = new WritableStream({
        write(chunk) {
            console.log("sending chunk", chunk);
            res.write(chunk);
        },
        close() {
            console.log("closing the writable stream");
            res.end();
        },
        abort() {
            console.log("aborting");
            res.statusCode = 500;
            res.end();
        },
    });

    return stream.pipeTo(writableStream);
}

这是客户端代码

export const getStreamData = async (
    dataForAI: any,
    URL: string,
    tmpChat: any,
    setCurrAIResp: any
) => {
    const response = await fetch(URL, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({ dataForAI: dataForAI }),
    });

    if (!response.ok) {
        throw new Error(response.statusText);
    }

    // This data is a ReadableStream
    const data = response.body;
    if (!data) {
        console.log("no data found int he body");

        return { usage: null, tCopy: tmpChat };
    }

    const reader = data.getReader();
    const decoder = new TextDecoder();
    let done = false;    
    let newAIResp = "";
    while (!done) {
    
        const { value, done: doneReading } = await reader.read();
        done = doneReading;
        const chunkValue = decoder.decode(value);

        console.log(doneReading, chunkValue, value);

        
            newAIResp += chunkValue;
            // console.log("newAIResp", newAIResp);
            setCurrAIResp({ role: "assitant", content: newAIResp });               
    }
};

这里是服务器端的日志。在我看来，API 正在发送数据，但我的前端无法读取/接收它。最令人困惑的部分是完全相同的代码在开发环境中完美运行。

npm run build

期间发生了一些事情

14 dChunk data: {"id":"chatcmpl-7DgaIvMn0DlBUwy3Shk7Zg7IN7GLD","object":"chat.completion.chunk","created":1683496314,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{"content":" you"},"index":0,"finish_reason":null}]}
sending chunk Uint8Array(4) [ 32, 121, 111, 117 ]
elta":{"content":" today"},"index":0,"finish_reason":null}]}
sending chunk Uint8Array(6) [ 32, 116, 111, 100, 97, 121 ]
18 dChunk data: {"id":"chatcmpl-7DgaIvMn0DlBUwy3Shk7Zg7IN7GLD","object":"chat.completion.chunk","created":1683496314,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{"content":"?"},"index":0,"finish_reason":null}]}
sending chunk Uint8Array(1) [ 63 ]
20 dChunk data: {"id":"chatcmpl-7DgaIvMn0DlBUwy3Shk7Zg7IN7GLD","object":"chat.completion.chunk","created":1683496314,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{},"index":0,"finish_reason":"stop"}]}
sending chunk Uint8Array(0) []
sending chunk Uint8Array(14) [
  84, 79, 75, 69, 78, 83,
  35, 35, 35, 52, 35, 35,
  35, 57
]
closing the writable stream

最后，这是来自前端的日志。这意味着，所有数据都是以镜头而不是块的形式接收的。但是服务器端日志说它正在发送块。

false 'Hello! How may I assist you today?TOKENS###4###9' Uint8Array(48) [72, 101, 108, 108, 111, 33, 32, 72, 111, 119, 32, 109, 97, 121, 32, 73, 32, 97, 115, 115, 105, 115, 116, 32, 121, 111, 117, 32, 116, 111, 100, 97, 121, 63, 84, 79, 75, 69, 78, 83, 35, 35, 35, 52, 35, 35, 35, 57, buffer: ArrayBuffer(48), byteLength: 48, byteOffset: 0, length: 48, Symbol(Symbol.toStringTag): 'Uint8Array']

true '' undefined