WebTransport

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.

TheWebTransport interface of theWebTransport API provides functionality to enable a user agent to connect to an HTTP/3 server, initiate reliable and unreliable transport in either or both directions, and close the connection once it is no longer needed.

Constructor

WebTransport(): Creates a newWebTransport object instance.

Instance properties

closedRead only: Returns a promise that resolves when the transport is closed.
datagramsRead only: Returns aWebTransportDatagramDuplexStream instance that can be used to send and receive datagrams.
congestionControlRead onlyExperimental: Returns a string that indicates the application preference for either high throughput or low-latency when sending data.
incomingBidirectionalStreamsRead only: Represents one or more bidirectional streams opened by the server. Returns aReadableStream ofWebTransportBidirectionalStream objects. Each one can be used to read data from the server and write data back to it.
incomingUnidirectionalStreamsRead only: Represents one or more unidirectional streams opened by the server. Returns aReadableStream ofWebTransportReceiveStream objects. Each one can be used to read data from the server.
readyRead only: Returns a promise that resolves when the transport is ready to use.
reliabilityRead onlyExperimental: Returns a string that indicates whether the connection supports reliable transports only, or whether it also supports unreliable transports (such as UDP).

Instance methods

close(): Closes an ongoing WebTransport session.
createBidirectionalStream(): Asynchronously opens a bidirectional stream (WebTransportBidirectionalStream) that can be used to read from and write to the server.
createUnidirectionalStream(): Asynchronously opens a unidirectional stream (WritableStream) that can be used to write to the server.
getStats()Experimental: Asynchronously returns a Promise that fulfills with an object containing HTTP/3 connection statistics.

Examples

The example code below shows how you'd connect to an HTTP/3 server by passing its URL to theWebTransport() constructor.Note that the scheme needs to be HTTPS, and the port number needs to be explicitly specified.Once theWebTransport.ready promise fulfills, you can start using the connection.

async function initTransport(url) {  // Initialize transport connection  const transport = new WebTransport(url);  // The connection can be used once ready fulfills  await transport.ready;  return transport;}

You can respond to the connection closing by waiting for theWebTransport.closed promise to fulfill.Errors returned byWebTransport operations are of typeWebTransportError, and contain additional data on top of the standardDOMException set.

ThecloseTransport() method below shows a possible implementation.Within atry...catch block it usesawait to wait for theclosed promise to fulfill or reject, and then reports whether or not the connection closed intentionally or due to error.

async function closeTransport(transport) {  // Respond to connection closing  try {    await transport.closed;    console.log(`The HTTP/3 connection to ${url} closed gracefully.`);  } catch (error) {    console.error(`The HTTP/3 connection to ${url} closed due to ${error}.`);  }}

We might call the asynchronous functions above in their own asynchronous function, as shown below.

// Use the transportasync function useTransport(url) {  const transport = await initTransport(url);  // Use the transport object to send and receive data  // …  // When done, close the transport  await closeTransport(transport);}const url = "https://example.com:4999/wt";useTransport(url);

For other example code, see the individual property and method pages.