WebTransportBidirectionalStream

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

Note: This feature is available inWeb Workers.

TheWebTransportBidirectionalStream interface of theWebTransport API represents a bidirectional stream created by a server or a client that can be used for reliable transport. Provides access to aWebTransportReceiveStream for reading incoming data, and aWebTransportSendStream for writing outgoing data.

Instance properties

readableRead only: Returns aWebTransportReceiveStream instance that can be used to read incoming data.
writableRead only: Returns aWebTransportSendStream 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 theWebTransport.createBidirectionalStream() method to get a reference to aWebTransportBidirectionalStream. Thereadable andwritable properties return references toWebTransportReceiveStream andWebTransportSendStream instances.These inherit fromReadableStream andWritableStream respectively, and can be used to read from and write to the server.

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;  // …}

Reading from theWebTransportReceiveStream can be done in the same way as you would read aReadableStream:

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 theWebTransportSendStream can be done like this:

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 theWebTransport.incomingBidirectionalStreams property, which returns aReadableStream ofWebTransportBidirectionalStream objects. Each one can be used to read and writeUint8Array instances as shown above. However, you need an initial function to read the bidirectional stream in the first place:

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