W3cubDocs

/Web APIs

WebTransportBidirectionalStream

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The WebTransportBidirectionalStream interface of the WebTransport API represents a bidirectional stream created by a server or a client that can be used for reliable transport. Provides access to a ReadableStream for reading incoming data, and a WritableStream for writing outgoing data.

Note: This feature is available in Web Workers

Instance properties

readable Read only

Returns a ReadableStream instance that can be used to read incoming data.

writable Read only

Returns a WritableStream instance that can be used to write outgoing data.

Examples

Bidirectional transmission initiated by the user agent

To open a bidirectional stream from a user agent, you use the WebTransport.createBidirectionalStream() method to get a reference to a WebTransportBidirectionalStream. The readable and writable properties return references to ReadableStream and WritableStream instances, which can be used to read from and write to the server.

js

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

  ...
}

Reading from the ReadableStream can then be done as follows:

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);
  }
}

And writing to the WritableStream can be done like this:

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);
}

Bidirectional transmission initiated by the server

If the server opens a bidirectional stream to transmit data to and receive it from the client, this can be accessed via the WebTransport.incomingBidirectionalStreams property, which returns a ReadableStream of WebTransportBidirectionalStream objects. Each one can be used to read and write Uint8Array instances as shown above. However, you need an initial function to read the bidirectional stream in the first place:

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);
  }
}

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
WebTransportBidirectionalStream 97 97 114 No 83 No 97 97 114 68 No 18.0
readable 97 97 114 No 83 No 97 97 114 68 No 18.0
writable 97 97 114 No 83 No 97 97 114 68 No 18.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebTransportBidirectionalStream