WebTransportBidirectionalStream

可用性有限

此功能并非基线功能，因为它在一些最广泛使用的浏览器中无法正常工作。

安全上下文：此功能仅在安全上下文（HTTPS）中可用，且仅在某些或所有支持的浏览器中可用。

注意：此功能在Web Workers中可用。

WebTransportBidirectionalStream 接口是 WebTransport API 的一部分，表示由服务器或客户端创建的用于可靠传输的双向流。提供对用于读取传入数据的 WebTransportReceiveStream 和用于写入传出数据的 WebTransportSendStream 的访问。

实例属性

readable 只读

返回一个 WebTransportReceiveStream 实例，可用于读取传入数据。

writable 只读

返回一个 WebTransportSendStream 实例，可用于写入传出数据。

示例

用户代理发起的双向传输

要从用户代理打开双向流，可以使用 WebTransport.createBidirectionalStream() 方法获取对 WebTransportBidirectionalStream 的引用。readable 和 writable 属性分别返回对 WebTransportReceiveStream 和 WebTransportSendStream 实例的引用。它们分别继承自 ReadableStream 和 WritableStream，可用于从服务器读取和写入数据。

js
async function setUpBidirectional() {
  const stream = await transport.createBidirectionalStream();
  // stream is a WebTransportBidirectionalStream
  // stream.readable is a WebTransportReceiveStream
  const readable = stream.readable;
  // stream.writable is a WebTransportSendStream
  const writable = stream.writable;

  ...
}

从 WebTransportReceiveStream 读取数据的方式与读取 ReadableStream 的方式相同

js
async function readData(readable) {
  const reader = readable.getReader();
  while (true) {
    const { value, done } = await reader.read();
    if (done) {
      break;
    }
    // value is a Uint8Array.
    console.log(value);
  }
}

向 WebTransportSendStream 写入数据的方式如下

js
async function writeData(writable) {
  const writer = writable.getWriter();
  const data1 = new Uint8Array([65, 66, 67]);
  const data2 = new Uint8Array([68, 69, 70]);
  writer.write(data1);
  writer.write(data2);
}

服务器发起的双向传输

如果服务器打开双向流以传输数据到客户端并接收来自客户端的数据，则可以通过 WebTransport.incomingBidirectionalStreams 属性访问此流，该属性返回一个包含 WebTransportBidirectionalStream 对象的 ReadableStream。每个对象都可以用于读取和写入 Uint8Array 实例，如上所示。但是，首先需要一个初始函数来读取双向流

js
async function receiveBidirectional() {
  const bds = transport.incomingBidirectionalStreams;
  const reader = bds.getReader();
  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      break;
    }
    // value is an instance of WebTransportBidirectionalStream
    await readData(value.readable);
    await writeData(value.writable);
  }
}

规范

规范
WebTransport
# webtransportbidirectionalstream

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅