流响应

¥Stream Response

将响应流式传输到客户端。
¥Stream response to the client.

使用流响应，它允许你在收到数据后立即将其发送到客户端。这对于大文件或长时间运行的响应非常有用。

¥Using stream responses It allows you to send data to the client as soon as you have it. This is useful for large files or long running responses.

创建流

¥Create a Stream

要流式传输响应，你首先需要使用 ReadableStream API 创建流：

¥To stream a response, you first need to create a stream using the ReadableStream API:

const stream = new ReadableStream();

为了举例，我们将创建一个启动函数，每 100 毫秒发送一个随机数。1000 毫秒后，它将关闭流：

¥For the example, we will create a start function that will send a random number every 100 milliseconds. After 1000 milliseconds, it will close the stream:

let interval: NodeJS.Timeout;
const stream = new ReadableStream({
  start(controller) {
    controller.enqueue("<ul>");

    interval = setInterval(() => {
      controller.enqueue("<li>" + Math.random() + "</li>");
    }, 100);

    setTimeout(() => {
      clearInterval(interval);
      controller.close();
    }, 1000);
  },
  cancel() {
    clearInterval(interval);
  },
});

发送流

¥Send a Stream

import { H3, setResponseHeader } from "h3";

export const app = new H3();

app.use((event) => {
  // Set to response header to tell to the client that we are sending a stream.
  setResponseHeader(event, "Content-Type", "text/html");
  setResponseHeader(event, "Cache-Control", "no-cache");
  setResponseHeader(event, "Transfer-Encoding", "chunked");

  let interval: NodeJS.Timeout;
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue("<ul>");

      interval = setInterval(() => {
        controller.enqueue("<li>" + Math.random() + "</li>");
      }, 100);

      setTimeout(() => {
        clearInterval(interval);
        controller.close();
      }, 1000);
    },
    cancel() {
      clearInterval(interval);
    },
  });

  return stream;
});

打开浏览器访问 http://localhost:3000，你应该会看到一个每 100 毫秒出现一次的随机数列表。

¥Open your browser to http://localhost:3000 and you should see a list of random numbers appearing every 100 milliseconds.

神奇！🎉

¥Magic! 🎉

静态资源

验证数据