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 以外的协议。例如，这与 WebSocket 一起使用。但是，您的示例代码没有使用不同的协议——它只是带有流式响应正文的常规 HTTP。Workers 运行时不支持除 WebSocket 之外的切换协议，因此它将拒绝为您的 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);
}