WebTransport is a new JavaScript API based on QUIC, providing bidirectional, low-latency real-time communication, suitable for online gaming, audio and video transmission and other scenarios. Its core features include: ① Reduce latency based on the QUIC protocol; ② Support two-way communication between clients and servers; ③ Multiplexing improves concurrency efficiency; ④ Support streaming and datagram transmission at the same time. When using the front-end, you need to create a WebTransport instance and establish a connection to send and receive data through streams or datagrams; the back-end needs to configure a server that supports QUIC, such as using the @fastify/quic plug-in of Ngtcp2, quiche or Node.js. Compared with WebSocket, WebTransport has more advantages in connection control, multiplexing and network fault tolerance, and is the preferred solution for high-performance real-time communication in the future.

WebTransport is an emerging API designed to provide the Web with more efficient and low-latency data transmission methods. Compared with the traditional HTTP request/response mode, it allows two-way communication and is based on the QUIC protocol, which is more suitable for real-time data interaction scenarios, such as online games, real-time audio and video, IoT data push, etc.

If you are looking for a more flexible and performing real-time communication solution than WebSocket, WebTransport is worth a try.

What is WebTransport?

WebTransport is an experimental JavaScript API that provides a way to establish a long-term connection between the client and the server, supporting two forms of data transmission: stream and datagram. It is not a direct alternative to WebSocket, but it is more feature-rich, especially in scenarios where low latency, high throughput is required.

Its core features are:

• QUIC-based : Use modern network protocol QUIC to reduce handshake delays.
• Two-way communication : Both the client and the server can actively send data.
• Multiplexing : Multiple streams can be transmitted in parallel in the same connection.
• Supports streaming and datagrams : suitable for different types of data transmission needs.

Currently, mainstream browsers support for WebTransport is still being promoted, Chrome and Edge support is good, and other browsers may have to wait for a while.

How to use WebTransport on the front end?

To use WebTransport, you first need to create a WebTransport instance and connect to the server. The basic process is as follows:

 const url = 'https://your-webtransport-server.com/';
const transport = new WebTransport(url);
await transport.ready;

Once the connection is established successfully, you can send and receive data through streams or datagrams. For example, using streams to send data can do this:

 const stream = await transport.createBidirectionalStream();
const writer = stream.writable.getWriter();

const encoder = new TextEncoder();
await writer.write(encoder.encode('Hello Server'));

To receive data, you can listen to incomingBidirectionalStreams or incomingUnidirectionalStreams :

 for await (const stream of transport.incomingBidirectionalStreams) {
  const reader = stream.readable.getReader();
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    console.log('Received:', new TextDecoder().decode(value));
  }
}

These operations do not seem complicated, but it should be noted that the server also needs to support WebTransport in order to communicate normally.

How to build WebTransport service in the backend?

WebTransport relies on HTTPS and QUIC, so the backend must use a QUIC-enabled server. The most popular implementations currently include:

• Google's Ngtcp2
• Cloudflare's quiche
• Node.js experimental support (some frameworks such as Fastify plug-in)

Taking Node.js as an example, you can use a plugin like @fastify/quic to enable QUIC and handle WebTransport requests. The configuration process is roughly as follows:

1. Prepare the TLS certificate and private key.
2. Create a QUIC server and listen to the port.
3. Process incoming streams and read and write data.

Although the ecosystem is not mature at the moment, as browser support increases, related tool chains will become more and more complete.

The difference between WebTransport and WebSocket

Many people compare WebTransport and WebSocket, but there are actually obvious differences between the two:

• The protocol basis is different : WebSocket is based on TCP, while WebTransport is based on QUIC (UDP upper layer).
• Connection control is different : WebSocket is a one-way handshake, and WebTransport can be initiated by the client or server.
• Multiplexing capability : WebSocket does not have built-in multiplexing, and WebTransport supports it.
• More error tolerance : WebTransport performs better against network issues such as packet loss due to UDP and QUIC.

If your application is latency sensitive or needs to send small packets frequently, WebTransport is usually a better choice.

Basically that's it. Although WebTransport is still in its development stage, its potential is already attractive enough. If you have real-time communication needs, you might as well learn about it in advance and prepare for the future high-performance web communication methods.

The above is the detailed content of Exploring the JavaScript WebTransport API for Real-time Data. For more information, please follow other related articles on the PHP Chinese website!