EventSource 在通过 Nextjs API 路由进行流式传输时立即获取所有块

Question

问题

我正在尝试通过EventSources将 stream 数据发送到我的React前端，这是可行的。 问题是我一次而不是一次又一次地接收所有数据块。 哪一种违背了该方法的目的，因为它现在基本上是一个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 讨论中找到了解决方案：

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

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

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

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