Cloudflare 工作人员 - SSE

如何解决Cloudflare 工作人员 - SSE

有没有办法与 cloudflare 工作人员一起进行服务器端事件？ 我只找到了一种方法，但它会在返回响应后立即停止。

    const { readable,writable } = new TransformStream();
    const response = {
      headers: new Headers({
        'Content-Type': 'text/event-stream','Cache-Control': 'no-cache','Access-Control-Allow-Headers': 'Origin,X-Requested-With,Content-Type,Accept',Connection: 'keep-alive',}),status: 101
    };

    setInterval(() => {
      const encoder = new TextEncoder();
      const writer = writable.getWriter();
      writer.write(encoder.encode(`data: hello\n\n`));
    },5000);

    return new Response(readable,response);

解决方法

您的示例代码有两个问题：

• 您不应设置状态代码 101。状态代码 101 表示“切换协议”，即服务器将开始说 HTTP 以外的内容。例如，这与 WebSockets 一起使用。但是，您的示例代码没有使用不同的协议——它只是带有流响应正文的常规 HTTP。除了 WebSocket 之外，Worker 运行时不支持切换协议，因此它将拒绝提供您的 101 状态代码，而是将错误提供给客户端。
• 您在每个时间间隔都调用 getWriter()，但您只能有一个 Writer，因此在第一个时间间隔之后，调用失败。您应该在设置间隔之前调用一次 getWriter()，然后重用该编写器。

在预览版中（例如在 cloudflareworkers.com 上，或在 Cloudflare 仪表板中，或使用 wrangler preview 或 wrangler dev）运行代码时，这两个问题都会在 JavaScript 控制台中显示为错误。我建议使用预览来调试您的代码，因为它可以告诉您客户端不可见的错误。

以下代码在预览中对我有用——文本按预期每 5 秒添加到响应中：

addEventListener('fetch',event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const { readable,writable } = new TransformStream();
  const encoder = new TextEncoder();
  const writer = writable.getWriter();
  setInterval(() => {
    writer.write(encoder.encode(`data: hello\n\n`));
  },5000);

  return new Response(readable);
}