WebTransport: A new way to communicate over HTTP/3

WebTransport is a web API that enables bidirectional and multiplexed communication between a web client and an HTTP/3 server. It supports both reliable and unreliable data transmission via streams and datagrams, respectively. It also provides low latency, high throughput, and out-of-order delivery. In this post, we will explain the architecture and benefits of WebTransport, and how to use it in your web applications.

What is WebTransport?

WebTransport is a web API that uses the HTTP/3 protocol as a transport layer for two-way communication. It’s intended for scenarios where WebSockets or WebRTC are not suitable or optimal, such as gaming, live streaming, or machine learning.

WebTransport provides the following features:

• Bidirectional: You can send and receive data in both directions between the client and the server.
• Multiplexed: You can open multiple logical channels (streams or datagrams) over a single connection.
• Streams: You can use streams to send and receive reliable, ordered, and flow-controlled data. Streams are analogous to TCP connections, but they can be opened and closed independently.
• Datagrams: You can use datagrams to send and receive unreliable, unordered, and congestion-controlled data. Datagrams are analogous to UDP packets, but they are encrypted and congestion-controlled by HTTP/3.
• Unreliable transport: You can use datagrams to send data that does not require reliability, such as real-time audio or video frames.
• Out-of-order delivery: You can use streams or datagrams to send data that does not require in-order delivery, such as multiplexed media chunks.
• Low latency: You can establish a connection quickly by using HTTP/3’s 0-RTT feature. You can also send data with minimal overhead by using HTTP/3’s header compression and multiplexing capabilities.
• High throughput: You can send data efficiently by using HTTP/3’s stream prioritization and flow control mechanisms. You can also take advantage of HTTP/3’s ability to use multiple network paths (QUIC connection migration) and recover from packet loss (QUIC loss recovery).

How does WebTransport work?

WebTransport is based on HTTP/3, which is a new version of HTTP that runs over QUIC. QUIC is a new transport protocol that runs over UDP and provides security, reliability, multiplexing, and migration features. The following diagram shows the relationship between WebTransport, HTTP/3, QUIC, and UDP.

To use WebTransport, you need an HTTP/3 server that supports the WebTransport protocol extension. The extension allows the server to accept WebTransport sessions that are initiated by the client via an HTTP/3 request. The session is a long-lived connection that can be used to exchange data via streams or datagrams.

To initiate a WebTransport session, the client sends an HTTP/3 request with a special :method pseudo-header set to CONNECT and a :protocol pseudo-header set to webtransport. The request may also include additional headers to provide extra information or parameters for the session. For example:

:method = CONNECT
:scheme = https
:authority = example.com:443
:path = /webtransport
:protocol = webtransport
origin = https://example.com

If the server accepts the request, it responds with a 2xx status code and a :protocol pseudo-header set to webtransport. The response may also include additional headers to provide extra information or parameters for the session. For example:

:status = 200
:protocol = webtransport

After the handshake is completed, the client and the server can exchange data over the session using streams or datagrams.

How to use WebTransport?

WebTransport is available as an experimental feature in some browsers (see Browser compatibility). To use it in your web applications, you need to enable it first by setting some flags or preferences.

To enable WebTransport in Chrome 96 or later, go to chrome://flags/#enable-experimental-web-platform-features and set it to Enabled.

To enable WebTransport in Firefox 95 or later, go to about:config and set dom.webtransport.enabled to true.

To use WebTransport in your web applications, you need to use the WebTransport interface, which provides methods and properties to create and manage a WebTransport session. For example, you can use the following code to create a WebTransport session and send a datagram:

// Create a WebTransport session
const transport = new WebTransport("https://example.com/webtransport");

// Wait for the session to be ready
await transport.ready;

// Create a datagram writer
const writer = transport.datagrams.writable.getWriter();

// Write a datagram
const data = new Uint8Array([65, 66, 67]);
await writer.write(data);

// Close the writer
await writer.close();

You can also use the following code to create a WebTransport session and receive a stream:

// Create a WebTransport session
const transport = new WebTransport("https://example.com/webtransport");

// Wait for the session to be ready
await transport.ready;

// Get a reader for the incoming streams
const reader = transport.incomingUnidirectionalStreams.readable.getReader();

// Read a stream
const { value: stream } = await reader.read();

// Get a reader for the stream data
const streamReader = stream.readable.getReader();

// Read the data
let data = "";
while (true) {
  const { value, done } = await streamReader.read();
  if (done) break;
  data += new TextDecoder().decode(value);
}

// Log the data
console.log(data);

// Close the reader
await reader.releaseLock();

Conclusion

WebTransport is a web API that enables bidirectional and multiplexed communication over HTTP/3. It supports both reliable and unreliable data transmission via streams and datagrams. It also provides low latency, high throughput, and out-of-order delivery. It can be useful for web applications that require high-performance and interactive communication, such as gaming, live streaming, or machine learning.

To use WebTransport, you need an HTTP/3 server that supports the WebTransport protocol extension, and a browser that supports the WebTransport API. You can use the WebTransport interface to create and manage a WebTransport session, and exchange data via streams or datagrams.

WebTransport is still an experimental feature, and its specification and implementation may change in the future. However, it is an exciting technology that promises to improve the web communication experience.