Cloudflare Workers - SSE

Question

有没有办法使用 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);

Answer 1

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

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

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

以下代码在预览中适用于我——文本按预期每 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);
}