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
Specification |
---|
WebTransport # webtransportbidirectionalstream |
Browser compatibility
BCD tables only load in the browser