WebTransport: The Future of Real-Time Communication, Bridging the Gap Beyond WebRTC & Websockets

Imagine a world where real-time communication is faster, more secure, and more efficient than ever before. A world where online gaming feels as responsive as playing in person, video streaming is seamless and buffer-free, and IoT devices transfer data with lightning speed. Welcome to the era of WebTransport, the cutting-edge technology poised to transform the way we connect and communicate over the web. It's time to say goodbye to the limitations of traditional protocols and get ready to be amazed by the endless possibilities of WebTransport.

In this blog article, we will explore the advantages of WebTransport over the widely adopted WebSockets and WebRTC technologies. We will uncover how WebTransport harnesses the power of datagrams, streams, and the cutting-edge QUIC protocol to redefine real-time communication, offering unparalleled benefits for a wide range of applications.

We will also discuss the current state of WebTransport adoption and the future of this promising technology.

So, without further ado, let’s dive into the world of WebTransport!

Credit — https://www.w3.org/2021/10/TPAC/demos/webtransport.html

WebTransport is a web API that uses the HTTP/3 protocol as a bidirectional transport. It’s intended for two-way communications between a web client and an HTTP/3 server. It supports sending data both unreliably via its datagram APIs, and reliably via its streams APIs.

How WebTransport works under the hood:

WebTransport can be used to send and receive data in two different ways: datagrams and streams.

1. Datagrams are individual packets of data that are limited in size by the maximum transmission unit (MTU) of the underlying connection. They may or may not be transmitted successfully, and if they are transferred, they may arrive in an arbitrary order. Datagrams are provided through the QUIC datagram extension and are prefixed with a session ID that the recipient can use to multiplex different transports
2. WebTransport also uses streams to send and receive data that need reliable and ordered delivery. Streams are provided by creating an individual unidirectional or bidirectional QUIC stream and are also prefixed with a session ID. Streams provide better transport efficiency than the older packet mechanism.

Process :

1. The client and server first establish a QUIC connection. This is done by using the QUIC handshake protocol.
2. Once the connection is established, the client and server can begin sending data to each other.
3. Data is sent in packets. Each packet is encrypted and includes a sequence number.
4. The receiver uses the sequence number to reorder the packets and decrypt them.
5. If a packet is lost, the receiver will request a retransmission.
6. The sender will retransmit the lost packet.
7. This process continues until all of the data has been sent and received.

WebTransport offers versatile capabilities for sending multiple types of data over the same connection. It allows for the reliable transmission of text or file data while concurrently enabling the unreliable transmission of video information. This flexibility enhances the efficiency and richness of communication among numerous simultaneous users. WebTransport facilitates the segregation of different content types on separate channels, preventing one type from blocking the transmission of others. Additionally, the ability to establish bidirectional streams enables quick data exchange between the server and client, making it ideal for implementing messaging systems and facilitating rapid communication.

What is QUIC Protocol :

QUIC, short for “Quick UDP Internet Connections,” is a modern transport protocol designed to enhance internet communication. Developed by Google, QUIC aims to replace TCP by utilizing UDP for faster and more efficient data transfer. It incorporates features like multiplexing to enable simultaneous transmission of multiple data streams, built-in encryption for enhanced security, and advanced congestion control algorithms to optimize network performance. With its standardization efforts by the IETF and increasing adoption by major internet players, QUIC holds the potential to revolutionize internet communication, offering improved speed, security, and reliability for a better web browsing experience.

Credit — Cloudflare

Credit — Cloudflare

QUIC is still under development.

Here are some of the benefits of using QUIC:

Performance: QUIC can improve the performance of web applications by reducing latency and increasing throughput. This is because QUIC is a connectionless protocol, which means that it does not need to establish a connection before sending data. This can reduce the amount of time it takes to send data, which can improve the performance of web applications.

Security: QUIC can improve the security of web applications by providing encryption and authentication. This is because QUIC uses TLS 1.3 to encrypt all data that is sent over the connection. This ensures that the data is secure from eavesdropping and tampering.

Efficiency: QUIC is more efficient than TCP in terms of bandwidth and CPU usage. This is because QUIC does not need to resend data that is lost, which can save bandwidth. QUIC also uses less CPU than TCP, which can save power.

Advantages of Webtransport over WebRTC/Websockets :

WebTransport offers several advantages over WebSockets and WebRTC in certain use cases. Here are some key advantages of using WebTransport:

Enhanced Performance: WebTransport introduces the QUIC protocol, which offers significant performance improvements over WebSocket and WebRTC. It leverages UDP-based transport, reducing latency and providing faster data transmission. This means quicker response times, smoother real-time interactions, and improved user experiences.

Efficient Resource Utilization: Unlike WebSocket and WebRTC, WebTransport utilizes a more efficient resource management approach. It requires fewer server resources to establish and maintain connections, allowing servers to handle a larger number of simultaneous connections without compromising performance or scalability.

Bidirectional: WebTransport is a bidirectional protocol, which means that data can flow in both directions between the client and server. This is useful for applications that need to send and receive data simultaneously, such as chat applications and multiplayer games.

Streamlined Data Transfer: With WebTransport’s data grams and streams, data can be sent and received in a more organized and efficient manner. It allows for the creation of bidirectional streams, enabling simultaneous data transfer between the client and server. This enables the development of advanced features such as reliable file transfer, simultaneous video streaming, and real-time collaboration.

More Reliable: WebTransport is a reliable protocol, which means that data is guaranteed to be delivered in the correct order. This is important for applications that require high reliability, such as gaming and video streaming.

Robust Security Measures: WebTransport’s streams API, based on the secure QUIC protocol, offers robust security for encrypted streaming. With built-in encryption, it ensures data confidentiality. Additional measures such as Origin header usage and specific opt-in requirements enhance security. WebTransport provides a secure environment for streaming, protecting the integrity and privacy of transmitted data.

Seamless Integration: WebTransport is designed to seamlessly integrate with existing web technologies. It can be easily adopted and incorporated into web applications without requiring major architectural changes. This makes it a viable option for migrating from WebSocket or WebRTC while preserving the functionality and user experience of the existing application.

Support for server push: WebTransport enables servers to proactively push data to clients, eliminating the need for clients to continually poll for updates.

Specific Problems Addressed by WebTransport:

Higher latency in WebSockets: WebSockets introduce additional latency due to the handshake and framing overhead, which WebTransport minimizes.

Lack of stream multiplexing in WebRTC: WebRTC does not natively support stream multiplexing, making it less efficient for scenarios requiring multiple concurrent data streams.

Limited transport options in WebSockets: WebSockets primarily provide reliable, ordered transport, whereas WebTransport offers flexibility by supporting both reliable and unreliable transport modes.

Inefficiency of polling for updates: With WebTransport’s server push capability, the need for clients to continually poll the server for updates is eliminated, reducing network congestion and improving efficiency.

Difficulty in extending protocols in WebSockets and WebRTC: WebTransport addresses this problem by providing a more extensible framework, allowing the introduction of new protocols and features without disrupting existing implementations.

Connect to a server using WebTransport QUIC using JavaScript:

1. Client creates a new WebTransport object.
2. Client calls the connect() method on the WebTransport object, passing in the URL of the server.
3. WebTransport object establishes a QUIC connection to the server.
4. Client and server negotiate the parameters of the QUIC connection, such as the encryption and congestion control algorithms.
5. The client and server can now send data to each other over the QUIC connection.

Here is an example using javaScript:

const webTransport = new WebTransport();
webTransport.connect('https://example.com');

webTransport.on('message', (data) => {
  // Handle the data received from the server.
});

webTransport.on('error', (error) => {
  // Handle the error that occurred while connecting to the server.
});

Possible use cases :

𝐆𝐚𝐦𝐢𝐧𝐠: WebTransport’s bidirectional streams are super helpful for making games. They make sure that the data sent by the server arrives quickly with very little delay. This is awesome for action-packed games like shooting, driving, or fighting because it reduces the time between when you do something on your device and when you see the game respond. It’s also great for cloud gaming services, where the game is run on a powerful server and streamed to your device. With WebTransport, the back-and-forth communication between you and the game server happens fast, making the whole gaming experience smoother and more responsive.

For example, it could be used to send real-time game state updates and player input to other players.

𝐕𝐢𝐝𝐞𝐨 𝐬𝐭𝐫𝐞𝐚𝐦𝐢𝐧𝐠: WebTransport is a good choice for video streaming, as it can provide a secure, reliable, and efficient way to send and receive video data. In addition, WebTransport can be used to multiplex multiple streams of data over a single connection, which can be useful for streaming video alongside other data, such as audio data or chat messages.

For example, it could be used to send video and audio data to the client without buffering.

𝐂𝐡𝐚𝐭 𝐚𝐩𝐩𝐥𝐢𝐜𝐚𝐭𝐢𝐨𝐧𝐬: WebTransport is a great fit for chat apps because it allows for fast and efficient communication between users. When we chat with someone, we want our messages to reach them quickly, and we want their responses to come back to us right away. WebTransport makes this happen by providing a smooth and low-latency connection. It ensures that our messages are sent and received almost instantly, creating a more seamless chatting experience. Additionally, WebTransport is designed to handle a large number of users at once, so even in busy chat rooms with lots of people, communication remains smooth and responsive. In simple terms, WebTransport helps chat apps work really well by making messages travel fast and keeping the conversation flowing smoothly.

IoT( Internet of Things) applications: WebTransport can be really useful for transferring data from Internet of Things (IoT) devices to servers. These devices often collect and send small bits of data regularly. With WebTransport, this data can be sent quickly with very little delay. This is important because IoT devices usually run on batteries, so it’s better if they use less energy. Plus, if there are a lot of devices connected to the internet, it can sometimes make the network slow. But with WebTransport, the devices use fewer resources and create less congestion, which means everything works better. So, WebTransport helps make IoT devices work well and saves energy at the same time.

Browser Support:

Chrome: 97+
Firefox: 114+
Edge: 97+
Safari: 16+ (partial support)
Samsung Internet: 19+
Opera: 97+

Credits : https://caniuse.com/webtransport

Current State of WebTransport Adoption and Future of This Promising Technology:

The current state of WebTransport adoption shows promising signs for the future of this technology. Although still in its early stages, WebTransport has got significant interest and attention from developers and industry experts. The potential benefits it offers, such as improved performance, lower latency, and increased reliability, make it an attractive choice for building modern web applications. Major browser vendors have started implementing WebTransport protocols and APIs, signaling their belief in its value. As more developers become familiar with WebTransport and explore its capabilities, we can expect to see wider adoption and integration of this technology into various web applications and services. With ongoing advancements and the active involvement of the web development community, the future of WebTransport looks promising, and we can anticipate exciting developments and innovations in this space in the years to come.

Thank you for taking the time to read my article on WebTransport. I hope you found it informative and insightful. Feel free to share any suggestions, questions, or additional insights you may have in the comments section below. Thank you once again for your support, and I look forward to engaging with you further!

References :

Using WebTransport - Chrome Developers

Will WebTransport Replace WebRTC in Near Future?

Zoom on Web: WebAssembly SIMD, WebTransport, and WebCodecs

https://developer.chrome.com/en/articles/webtransport

QUIC and the future of Internet transport

The Road to QUIC

HTTP/3: Performance Improvements (Part 2) - Smashing Magazine

WebTransport Working Group Updates by Will Law, TPAC 2021 Group udpates and demos

https://ably.com/blog/can-webtransport-replace-websockets