如何将WritableStream通过TransformStream进行管道传输？

你可以通过封装工具函数将编码器TransformStream与目标WritableStream绑定，实现和读流pipeThrough一致的编码逻辑复用，无需手动在写入前编码。

方法1：封装成可复用的WritableStream #

直接创建一个新的WritableStream，内部自动将写入的数据通过编码器转换后再传递给目标流：

// 工具函数：将编码器与目标可写流绑定，返回带自动编码的新可写流
function wrapWritableWithEncoder(targetWritable, EncoderTransform) {
  return new WritableStream({
    async write(chunk) {
      // 实例化你的编码器TransformStream
      const encoder = new EncoderTransform();
      const encoderWriter = encoder.writable.getWriter();
      
      // 将原始数据写入编码器
      await encoderWriter.write(chunk);
      await encoderWriter.close();
      
      // 将编码器输出的可读流导入目标可写流
      // 关键：preventClose: true 避免每次写入后关闭目标流
      await encoder.readable.pipeTo(targetWritable, { preventClose: true });
    },
    // 透传关闭和中止操作到目标流
    async close() {
      const targetWriter = targetWritable.getWriter();
      await targetWriter.close();
      targetWriter.releaseLock();
    },
    async abort(reason) {
      const targetWriter = targetWritable.getWriter();
      await targetWriter.abort(reason);
      targetWriter.releaseLock();
    }
  });
}

用法示例 #

假设你的编码器类是MessageEncoder（继承TransformStream），目标可写流是Web Serial的serialPort.writable：

// 创建带自动编码的可写流
const encodedWritable = wrapWritableWithEncoder(serialPort.writable, MessageEncoder);

// 直接写入原始数据，自动完成编码
const writer = encodedWritable.getWriter();
await writer.write(yourRawDataBuffer);
// 多次写入也无需额外处理
await writer.write(anotherRawData);
await writer.close();

方法2：单次写入的简化工具函数 #

如果不需要持久化的可写流，只是单次写入时自动编码，可以用更简洁的方式：

// 单次写入：原始数据 → 编码器 → 目标可写流
async function writeThroughEncoder(chunk, targetWritable, EncoderTransform) {
  // 将单个数据块转为可读流
  const readable = ReadableStream.from([chunk]);
  // 依次通过编码器、导入目标流
  await readable.pipeThrough(new EncoderTransform()).pipeTo(targetWritable, { preventClose: true });
}

用法示例 #

// 直接调用即可完成编码+写入
await writeThroughEncoder(yourRawData, serialPort.writable, MessageEncoder);

关键注意事项 #

• 必须设置pipeTo的preventClose: true，否则每次写入后目标可写流会被关闭，无法进行后续写入操作。
• 两种方法都复用了你已实现的TransformStream编码器，和读流的pipeThrough(decoder)逻辑保持一致，完全满足“同一代码适配Readable/WritableStream”的需求。

内容的提问来源于stack exchange，提问作者njh