JS `WritableStreamDefaultController`：控制写入流的背压与排队

嘿，各位代码爱好者！今天咱们要聊聊 JavaScript 里面一个有点神秘，但又非常实用的家伙：WritableStreamDefaultController。别被它拗口的名字吓到，其实它就是个“流量管理员”，专门负责控制写入流的背压和排队。

咱们先来想想，水管堵了会怎么样？水会漫出来！写入流也一样，如果写入速度太快，处理速度跟不上，就会造成“背压”，也就是数据积压。 WritableStreamDefaultController 就是来防止水管堵塞的。

一、什么是WritableStream？

在深入WritableStreamDefaultController之前，先简单回顾一下WritableStream。WritableStream是Web API提供的一种用于将数据写入目标（通常是文件、网络套接字或其他输出）的接口。它允许你以异步的方式写入数据块，这对于处理大量数据或需要与外部资源交互的情况非常有用。

想象一下，你正在用 JavaScript 将一段视频上传到服务器。你肯定不想一次性把整个视频都塞进去，那样太耗内存了。更好的做法是把视频分成小块，一块一块地上传。这就是 WritableStream 的用武之地。

二、背压（Backpressure）的概念

背压是流处理中一个非常重要的概念。它指的是当一个数据流的下游（消费者）无法以足够快的速度处理数据时，向上游（生产者）发出的信号，告知其降低数据发送速度。简单来说，就是告诉上游：“喂，兄弟，你慢点，我处理不过来了！”

如果没有背压机制，下游可能会因为数据积压而崩溃，或者丢失数据。 WritableStream 通过 WritableStreamDefaultController 来实现背压控制。

三、WritableStreamDefaultController：流量管理员

WritableStreamDefaultController 是与 WritableStream 紧密相连的一个对象。它负责：

管理写入队列：接收来自写入器的写入请求，并将它们排队。
处理背压信号：监听底层系统的状态，判断是否需要通知写入器减慢写入速度。
控制流的状态：维护流的当前状态（是否关闭、是否出错等）。

你可以把 WritableStreamDefaultController 想象成一个交通警察，它会根据路况（下游的处理能力）来调整车流量（写入速度）。

四、如何使用WritableStreamDefaultController？

虽然你不能直接创建或操作 WritableStreamDefaultController 对象，但是你可以通过 WritableStream 的构造函数来配置它的行为。 WritableStream 的构造函数接受一个对象作为参数，这个对象可以包含以下属性：

start(controller)：流开始时调用的函数。你可以在这里初始化资源或执行一些准备工作。 controller 参数就是与该流关联的 WritableStreamDefaultController 对象。
write(chunk, controller)：当有新的数据块写入流时调用的函数。 chunk 参数是要写入的数据块，controller 参数是与该流关联的 WritableStreamDefaultController 对象。
close(controller)：当流被关闭时调用的函数。你可以在这里释放资源或执行一些清理工作。 controller 参数是与该流关联的 WritableStreamDefaultController 对象。
abort(reason)：当流被中止时调用的函数。 reason 参数是中止的原因。

下面是一个简单的例子：

const stream = new WritableStream({
  start(controller) {
    console.log("Stream started");
  },
  write(chunk, controller) {
    // 模拟写入操作，这里只是简单地打印数据
    console.log("Writing chunk:", chunk);
    return new Promise((resolve) => {
      // 模拟异步写入操作
      setTimeout(() => {
        console.log("Chunk written");
        resolve();
      }, 500);
    });
  },
  close(controller) {
    console.log("Stream closed");
  },
  abort(reason) {
    console.error("Stream aborted:", reason);
  }
});

// 创建一个写入器
const writer = stream.getWriter();

// 写入数据
writer.write("Hello");
writer.write("World");

// 关闭流
writer.close();

在这个例子中，我们定义了一个 WritableStream，并实现了 start、write、close 和 abort 这四个方法。在 write 方法中，我们使用 setTimeout 模拟了一个异步的写入操作。

五、WritableStreamDefaultController的属性和方法

虽然你不能直接操作 WritableStreamDefaultController 对象，但是你可以在 start、write、close 和 abort 方法中使用它来控制流的行为。 WritableStreamDefaultController 对象提供以下属性和方法：

desiredSize： (只读)表示流可以接受的排队数据块的大小。当 desiredSize 为正数时，表示流可以接受更多的数据；当 desiredSize 为负数时，表示流需要减少写入速度。
error(e)：将流置于错误状态，并关闭流。 e 参数是错误对象。
close()：关闭流。

六、背压控制的实现

WritableStream 通过 desiredSize 属性来实现背压控制。当 desiredSize 为负数时，表示流需要减少写入速度。写入器可以通过监听 WritableStream 的 ready 属性来判断是否可以继续写入数据。

下面是一个更完整的例子，展示了如何使用 desiredSize 来实现背压控制：

const stream = new WritableStream({
  start(controller) {
    console.log("Stream started");
  },
  write(chunk, controller) {
    console.log("Writing chunk:", chunk);
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log("Chunk written");
        resolve();
      }, 500);
    });
  },
  close(controller) {
    console.log("Stream closed");
  },
  abort(reason) {
    console.error("Stream aborted:", reason);
  },
  highWaterMark: 2 // 设置 highWaterMark 为 2
});

const writer = stream.getWriter();

// 写入数据
async function writeData() {
  for (let i = 0; i < 5; i++) {
    console.log(`Writing chunk ${i}`);
    const ready = await writer.ready; // 等待 ready 属性变为 true
    if (ready === undefined) { // 检查流是否出错或关闭
      console.error("Stream is broken");
      return;
    }
    await writer.write(`Chunk ${i}`);
    console.log(`Chunk ${i} written`);
  }
  await writer.close();
  console.log("Stream closed");
}

writeData();

在这个例子中，我们设置了 highWaterMark 为 2。 highWaterMark 表示流可以接受的最大排队数据块数量。当排队的数据块数量超过 highWaterMark 时，desiredSize 将变为负数，ready 属性将变为一个 rejected promise。写入器可以通过等待 ready 属性变为一个 resolved promise 来判断是否可以继续写入数据。

七、WritableStream的常见应用场景

文件下载：将从服务器接收到的数据块写入文件。
视频流：将视频数据块发送到浏览器进行播放。
网络请求：将数据块发送到服务器。
数据处理：将数据块传递给其他处理模块。

八、WritableStream 与其他流的比较

特性	ReadableStream	WritableStream	TransformStream
方向	读取数据	写入数据	转换数据
核心方法	read()	write()	transform()
背压支持	有	有	有
主要用途	从源读取数据	向目标写入数据	在流之间转换数据

九、一些需要注意的点

错误处理：在 write、close 和 abort 方法中，务必进行错误处理，防止程序崩溃。
资源释放：在 close 和 abort 方法中，务必释放资源，防止内存泄漏。
异步操作： write 方法必须返回一个 Promise，以便 WritableStream 知道写入操作是否完成。
highWaterMark的设置： highWaterMark 的值会影响背压机制的灵敏度。如果 highWaterMark 设置得太小，可能会导致频繁的背压，降低性能；如果 highWaterMark 设置得太大，可能会导致内存占用过高。

十、总结

WritableStreamDefaultController 是 WritableStream 的核心组成部分，它负责管理写入队列、处理背压信号和控制流的状态。通过 WritableStream 的构造函数，我们可以配置 WritableStreamDefaultController 的行为，从而实现灵活的流控制。掌握 WritableStream 和 WritableStreamDefaultController 可以帮助你编写更高效、更可靠的 JavaScript 代码。

希望今天的分享能帮助大家更好地理解 WritableStreamDefaultController。记住，编程就像盖房子，理解好基础概念，才能盖出坚固的摩天大楼！咱们下次再见！

发表回复 取消回复

发表回复取消回复