当通过 Nextjs API 路由进行流式传输时，EventSource 一次获取所有块

Question

问题

我正在尝试通过EventSources将数据流式传输到我的React Frontend ，这种方法可行。问题是我一次收到所有数据块，而不是一次又一次地收到。哪种方法违背了该方法的目的，因为它现在基本上是GET请求。

代码

我正在使用Next.js api 路由，这是我在此路由上的代码：

res.writeHead(200, {
  "Content-Type": "text/event-stream",
  "Cache-Control": "no-cache",
  Connection: "keep-alive",
});

answerStream.data
  .on("data", (chunk: string) => res.write(chunk))
  .on("error", (error: Error) => {
    console.error(error);
    res.end();
  })
  .on("end", () => res.end());

这是前端中的代码：

  const eventSource = new EventSource(url);
  eventSource.addEventListener("message", e => {
    try {
      if (e.data == "[DONE]") eventSource.close();
      else {
        const messageObject = JSON.parse(e.data);
        setArticle(state => (state += messageObject?.choices[0]?.text));
      }
    } catch (error) {
      console.log(error);
    }
  });

  eventSource.addEventListener("close", e => {
    console.log("Connection closed with the server");
    setSubmitting(false);
  });

  eventSource.addEventListener("error", e => {
    setError(e?.message || "Leider ist ein Fehler aufgetreten");
    setSubmitting(false);
    eventSource.close();
  });

信息

我的实现有什么错误吗？或者 Next.js对 的处理有什么奇怪的吗EventSource？

Answer 1

解决方案

好的，我在Github 讨论中找到了解决方案：

问题似乎是中间件添加了浏览器使用标头协商的 gzip 编码

为了解决这个问题，需要通过添加'Content-Encoding': 'none'到服务器上的标头来覆盖该行为：

res.writeHead(200, {
    Connection: 'keep-alive',
    'Content-Encoding': 'none',
    'Cache-Control': 'no-cache',
    'Content-Type': 'text/event-stream',
  });

或者，可以使用自定义server.js。