Skip to main content

WebTransport is a new API that offers low latency bidirectional client-server messaging. Learn more about their use cases and how to comment on the future of your deployment.


Updated

Caution: Esta iniciativa ha sufrido cambios importantes desde el inicio del Ensayo de Origen. A partir de Chrome 87, WebTransport ha reemplazado a QuicTransport como la interfaz de nivel superior con la que interactúan los desarrolladores.

Como consecuencia, parte de la información y todo el código de muestra de este post está desactualizado. Para conocer las últimas novedades sobre esta iniciativa en evolución, consulte el
WebTransport editor draft. Includes a Examples section with updated code snippets.

Una vez que la iniciativa se estabilice, actualizaremos este post y los ejemplos de código asociados con información actualizada.

Background

What is QuicTransport?

QuicTransport es una API web que usa QUIC protocolo en un transporte bidireccional, no HTTP. Está diseñado para comunicaciones bidireccionales entre un cliente web y un servidor QUIC. Admite el envío de datos de manera poco confiable mediante sus API de datagramas y de manera confiable mediante sus API de transmisión.

Datagrams they are ideal for sending and receiving data that does not need strong delivery guarantees. Individual data packets are limited in size by the maximum transmission unit (MTU) of the underlying connection, and may or may not be transmitted successfully, and if transferred, they may arrive in an arbitrary order. These features make Datagram APIs ideal for low-latency, best-effort data transmission. You can think of datagrams as user datagram protocol (UDP) messages, but encrypted and congestion controlled.

Streams APIs, by contrast, provide trustworthy, transferencia de datos ordenada. Son muy adecuado a escenarios en los que requiere enviar o recibir uno o más flujos de datos ordenados. El uso de diversos flujos QUIC es análogo a determinar diversos TCP connections, but QUIC flows are lightweight and can be opened and closed without much overhead.

What is WebTransport?

QuicTransport is a part of the greater Iniciativa de WebTransport. WebTransport es una colección de API para enviar y recibir datos entre un cliente web y un servidor. QuicTransport es la interfaz para usar el protocolo QUIC en el contexto de las comunicaciones WebTransport bidireccionales.

Chrome está implementando la parte QuicTransport de WebTransport primero, antes que cualquiera de las otras interfaces propuestas. El equipo de Chrome ha tomado la decisión de empezar con QuicTransport luego de hablar con los desarrolladores web sobre sus casos de uso. Esperamos solicitar retroalimentación temprana sobre el esfuerzo general de WebTransport basado en las experiencias de los desarrolladores con QuicTransport.

Use cases

Esta es una pequeña lista de las posibles formas en que los desarrolladores pueden utilizar QuicTransport.

  • Enviar el estado del juego a intervalos regulares con una latencia mínima a un servidor mediante mensajes pequeños, poco confiables y fuera de orden.
  • Recibir transmisiones de medios enviadas desde un servidor con latencia mínima, sin tener en cuenta otras transmisiones de datos.
  • Receive notifications sent from a server while a web page is open.

Como parte del procedimiento de prueba de origen, estamos interesados ​​en conocer más acerca de cómo planea utilizar QuicTransport.

Actual state

He passed Condition
1. Create an explainer To complete
2. Create initial draft specification To complete
3. Collect feedback and repeat the design In progress
4. Proof of origin In progress
5. Launch Not started

Vinculación de QuicTransport con otras tecnologías

Is QuicTransport a replacement for WebSockets?

Quizá. Hay casos de uso en los que WebSockets o QuicTransport pueden ser protocolos de comunicación válidos para utilizar.

Las comunicaciones de WebSockets se modelan en torno a un flujo de mensajes único, confiable y ordenado, lo cual está bien para algunos tipos de necesidades de comunicación. Si requiere esas características, las API de streams de QuicTransport además pueden proporcionarlas. En comparación, las API de datagramas de QuicTransport brindan una entrega de baja latencia, sin garantías de confiabilidad o pedidos, por lo que no son un reemplazo directo de WebSockets.

El uso de QuicTransport, mediante las API de datagramas o a través de diversos instancias de API de Streams simultáneas, significa que no tiene que preocuparse por head-of-line blocking, que puede ser un obstáculo con WebSockets. Al mismo tiempo, existen beneficios de rendimiento al determinar nuevas conexiones, dado que Quick handshake it is faster than starting TCP over TLS.

QuicTransport es parte de un nuevo borrador de especificación y, como tal, el ecosistema WebSocket en torno a las bibliotecas de cliente y servidor es en este momento mucho más sólido. Si requiere algo que funcione «fuera de la caja» con configuraciones de servidor comunes y con un amplio soporte de cliente web, WebSockets es una mejor opción en este momento.

Is QuicTransport the same as a UDP socket API?

No. QuicTransport is not a UDP socket API. Aunque QUIC utiliza UDP «bajo el capó», QuicTransport tiene requerimientos en torno al cifrado y el control de la congestión que lo convierten en algo más que una API básica de UDP Socket.

Is QuicTransport an alternative to WebRTC data channels?

Yes, for client-server connections. QuicTransport shares many of the same properties as WebRTC data channels, aún cuando los protocolos subyacentes son diferentes.

Los canales de datos WebRTC admiten comunicaciones de igual a igual, pero QuicTransport solo admite la conexión cliente-servidor. Si cuenta con varios clientes que necesitan hablar de forma directa entre ellos, QuicTransport no es una opción posible.

De forma general, ejecutar un servidor compatible con QUIC necesita menos instalación y configuración que mantener un servidor WebRTC, lo que conlleva entender varios protocolos (ICE, DTLSand SCTP) para obtener un transporte que funcione. WebRTC conlleva muchas más piezas móviles que podrían conducir a negociaciones fallidas entre cliente y servidor.

La API de QuicTransport se diseñó teniendo en cuenta los casos de uso de los desarrolladores web y debería sentirse más como escribir un código de plataforma web moderno que usar las interfaces de canal de datos de WebRTC. Unlike WebRTC, QuicTransport is supported within Empleados web, que le posibilita realizar comunicaciones cliente-servidor sin tener en cuenta una página HTML determinada. Debido a que QuicTransport expone un Currents-compatible interface, supports optimizations around back pressure.

No obstante, si ya dispone de una configuración de cliente / servidor WebRTC en funcionamiento con la que está satisfecho, es viable que cambiar a QuicTransport no ofrezca muchas ventajas.

test it

La mejor forma de experimentar con QuicTransport es usar this python code para iniciar un servidor QUIC compatible localmente. A continuación, puede usar esta página con un basic JavaScript client to test client / server communications.

Utilizando la API

QuicTransport was designed on the primitives of the modern web platform, such as Streams API. It relies heavily on promisesy va bastante bien con async and await.

QuicTransport's proof of origin supports three different types of traffic: datagrams, as well as one-way and two-way flows.

Connect to a server

You can connect to a QUIC server by creating a QuicTransport example. The URL scheme must be quic-transport. You must explicitly specify the port number.

Deberías utilizar el ready promete esperar a que se establezca la conexión. Esta promesa no se cumplirá hasta que se complete la configuración y se rechazará si la conexión falla en la fase QUIC / TLS.

the closed La promesa se alcanza cuando la conexión se cierra regularmente y se rechaza si el cierre fue inesperado.

If the server rejects the connection due to a customer indication error (a modo de ejemplo, la ruta de la URL no es válida), entonces eso causa closed reject, while ready permanece sin solucionar.

const dirección url = 'quic-transport://example.com:4999/foo/bar';
const transport = new QuicTransport(dirección url);


transport.closed.then(() => {
console.log(`The QUIC connection to ${dirección url} closed gracefully.`);
}).catch((error) => {
console.error('The QUIC connection to ${dirección url} closed due to ${error}.');
});


await transport.ready;

Datagram API

Once you have an instance of QuicTransport that is connected to a server, you can use it to send and receive bits of discrete data, known as datagrams.

the sendDatagrams () the method returns a WritableStream, que un cliente web puede usar para enviar datos al servidor. los receiveDatagrams () the method returns a ReadableStream, lo que le posibilita escuchar datos del servidor. Ambas transmisiones son inherentemente poco confiables, por lo que es viable que el servidor no reciba los datos que escriba, y viceversa.

Ambos tipos de corrientes usan Uint8Array instances for data transfer.


const ws = transport . sendDatagrams ( ) ;
const writer = ws . getWriter ( ) ;
const data1 = new Uint8Array ( [ 65 , 66 , 67 ] ) ;
const data2 = new Uint8Array ( [ 68 , 69 , 70 ] ) ;
writer . write ( data1 ) ;
writer . write ( data2 ) ;


const rs = transport . receiveDatagrams ( ) ;
const reader = rs . getReader ( ) ;
while ( true ) {
const { value , done } = await reader . read ( ) ;
if ( done ) {
break ;
}
console . log ( value ) ;
}

Chrome no en este momento expose a asynchronous iterator for ReadableStream. Por el momento, usando el getReader () method combined with a while () loop is the best way to read from the sequence.

Streams API

Una vez que se haya conectado al servidor, además puede utilizar QuicTransport para enviar y recibir datos mediante sus API Streams.

Each part of all transmissions is a Uint8Array. Unlike the datagram APIs, these streams are reliable. But each stream is independent, so the order of the data between the streams is not guaranteed.

SendStream

A SendStream es creado por el cliente web usando el createSendStream () method of a QuicTransport instance, which returns a promise for the SendStream.

Use the close () method of WritableStreamDefaultWriter associated with the sequence to send a QUIC Stream FIN bit to the server. The browser tries to send all pending data before closing the associated QUIC flow.


const stream = await transport . createSendStream ( ) ;
const writer = stream . writable . getWriter ( ) ;
const data1 = new Uint8Array ( [ 65 , 66 , 67 ] ) ;
const data2 = new Uint8Array ( [ 68 , 69 , 70 ] ) ;
writer . write ( data1 ) ;
writer . write ( data2 ) ;
try {
await writer . close ( ) ;
console . log ( 'All data has been sent.' ) ;
} catch ( error ) {
console . error ( ` An error occurred: $ { error } ` ) ;
}

De la misma forma, utilice el abort () method of WritableStreamDefaultWriter to send a QUIC RESET_STREAM to the server. When you use abort (), el navegador puede descartar cualquier dato pendiente que todavía no se haya enviado.

const ws = await transport . createSendStream ( ) ;
const writer = ws . getWriter ( ) ;
writer . write ( ... ) ;
writer . write ( ... ) ;
await writer . abort ( ) ;

ReceiveStream

A ReceiveStream es iniciado por el servidor. Conseguir un ReceiveStream es un procedimiento de dos pasos para un cliente web. Primero, llama al receiveStreams () method of a QuicTransport instance, which returns a ReadableStream. Every piece of it ReadableStream, is, in turn, a ReceiveStream que se puede utilizar para leer Uint8Array instances submitted by the server.

async function readFrom ( receiveStream ) {
const reader = receiveStream . readable . getReader ( ) ;
while ( true ) {
const { done , value } = await reader . read ( ) ;
if ( done ) {
break ;
}
console . log ( value ) ;
}
}

const rs = transport . receiveStreams ( ) ;
const reader = rs . getReader ( ) ;
while ( true ) {
const { done , value } = await reader . read ( ) ;
if ( done ) {
break ;
}
await readFrom ( value ) ;
}

Puede detectar el cierre de una corriente utilizando el closed promise of ReadableStreamDefaultReader. When the QUIC sequence is closed with the FIN bit, the closed La promesa se alcanza luego de leer todos los datos. Cuando el flujo QUIC se cierra abruptamente (a modo de ejemplo, por STREAM_RESET), So, the closed promise rejected.


const reader = receiveStream . readable . getReader ( ) ;
reader . closed . then ( ( ) => {
console . log ( 'The receiveStream closed gracefully.' ) ;
} ) . catch ( ( ) => {
console . error ( 'The receiveStream closed abruptly.' ) ;
} ) ;

BidirectionalStream

A BidirectionalStream it can be created by the server or the client.

Los clientes web pueden crear uno utilizando el createBidirectionalStream () method of a QuicTransport instance, which returns a promise for a BidirectionalStream.

const stream = await transport . createBidirectionalStream ( ) ;

Can you hear a BidirectionalStream created by the server with the receiveBidirectionalStreams () method of a QuicTransport instance, which returns a ReadableStream. Every piece of it ReadableStream, is, in turn, a BidirectionalStream.

const rs = transport . receiveBidrectionalStreams ( ) ;
const reader = rs . getReader ( ) ;
while ( true ) {
const { done , value } = await reader . read ( ) ;
if ( done ) {
break ;
}
}

A BidirectionalStream it's just a combination of a SendStream and ReceiveStream. Los ejemplos de las dos secciones anteriores explican cómo usar cada uno de ellos.

More examples

the WebTransport specification project includes several additional online examples, along with complete documentation of all methods and properties.

Enabling support during proof of origin

  1. Request a token by your origin.
  2. Add the token to your pages. There are two ways to do it:
    • Add a origin-trial etiqueta al encabezado de cada página. A modo de ejemplo, esto puede verse así:
    • Si puede configurar su servidor, además puede agregar el token utilizando un Origin-Trial HTTP header. The resulting response header should look like this:
      Origin-Trial: TOKEN_GOES_HERE

QuicTransport in Chrome DevTools

Unfortunately, Chrome DevTools the support for QuicTransport is not ready for the start of the proof of origin. Please "star" this chrome problem to receive notifications about updates in the DevTools interface.

Privacy and security considerations

Please see the sección respectivo of the draft specification for an authoritative guide.

Feedback

El equipo de Chrome desea escuchar sus pensamientos y experiencias al usar esta API durante todo el procedimiento de prueba de origen.

Comments on the API design

¿Puede haber algo en la API que es incómodo o no funciona como se esperaba? ¿O faltan piezas que necesitas para poner en práctica tu idea?

Presentar un obstáculo en el Web Transport GitHub Repositoryo agregue sus pensamientos a un obstáculo existente.

Problem with the implementation?

Found a bug with the Chrome implementation?

File a bug in https://new.crbug.com. Include as much detail as you can, along with simple instructions for reproduction.

¿Planea usar la API?

Your public support helps Chrome prioritize features and shows other browser vendors how important it is to support them.

  • Make sure you have signed up for the essay of origin to show your interest and provide your domain and contact information.
  • Send a tweet to @Cromodev with #QuicTransport y detalles sobre dónde y cómo lo está utilizando.

General Discussion

Puedes utilizar el Web-transport-dev Google Group for general questions or problems that do not fit into any of the other categories.

Thanks

Este post incorpora información de la WebTransport explainer, draft specificationand related design documents. Gracias a los respectivos autores por otorgar esa base.

The main image of this post is from Robin pierre on Unsplash.