The WebTransport interface of the WebTransport 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.
Represents one or more bidirectional streams opened by the server. Returns a ReadableStream of WebTransportBidirectionalStream objects. Each one can be used to read data from the server and write data back to it.
Represents one or more unidirectional streams opened by the server. Returns a ReadableStream of WebTransportReceiveStream objects. Each one can be used to read data from the server.
Returns a string that indicates whether the connection supports reliable transports only, or whether it also supports unreliable transports (such as UDP).
The example code below shows how you'd connect to an HTTP/3 server by passing its URL to the WebTransport() constructor.
Note that the scheme needs to be HTTPS, and the port number needs to be explicitly specified.
Once the WebTransport.ready promise fulfills, you can start using the connection.
js
asyncfunctioninitTransport(url){// Initialize transport connectionconst transport =newWebTransport(url);// The connection can be used once ready fulfillsawait transport.ready;return transport;}
You can respond to the connection closing by waiting for the WebTransport.closed promise to fulfill.
Errors returned by WebTransport operations are of type WebTransportError, and contain additional data on top of the standard DOMException set.
The closeTransport() method below shows a possible implementation.
Within a try...catch block it uses await to wait for the closed promise to fulfill or reject, and then reports whether or not the connection closed intentionally or due to error.
js
asyncfunctioncloseTransport(transport){// Respond to connection closingtry{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.
js
// Use the transportasyncfunctionuseTransport(url){const transport =awaitinitTransport(url);// Use the transport object to send and receive data// ...// When done, close the transportawaitcloseTransport(transport);}const url ="https://example.com:4999/wt";useTransport(url);
For other example code, see the individual property and method pages.
Tip: you can click/tap on a cell for more information.
Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.