Expérimenter avec WebTransport

WebTransport es una nueva API que ofrece mensajería cliente-servidor bidireccional de baja latencia. Obtenga más información sobre sus casos de uso y cómo dar comentarios sobre el futuro de la implementación.

8 juin 2020
Mise à jour 10 novembre 2020

Antécédents

Qu'est-ce que QuicTransport?

QuicTransport es una API la toile que usa QUIC protocolo en un transporte bidireccional, no HTTP. Está diseñado para comunicaciones bidireccionales entre un client web y un serveur 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.

Datagrammes ils sont idéaux pour envoyer et recevoir des données qui ne nécessitent pas de solides garanties de livraison. Les paquets de données individuels sont limités en taille par le unité de transmission maximale (MTU) de la connexion sous-jacente, et peuvent ou non être transmises avec succès, et si elles sont transférées, elles peuvent arriver dans un ordre arbitraire. Ces fonctionnalités rendent les API Datagram idéales pour la transmission de données à faible latence et au meilleur effort. Vous pouvez considérer les datagrammes comme protocole de datagramme utilisateur (UDP) messages, mais chiffrés et contrôlés par la congestion.

Les API Streams, en revanche, fournissent fiable, 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 connexions, mais les flux QUIC sont légers et peuvent être ouverts et fermés sans trop de frais généraux.

Qu'est-ce que WebTransport?

QuicTransport fait partie de la plus grande 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.

Cas d'utilisation

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.
• Recevez les notifications envoyées par un serveur lorsqu'une page Web est ouverte.

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

État actuel

Vinculación de QuicTransport con otras tecnologías

QuicTransport remplace-t-il 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 blocage de tête de ligne, que puede ser un obstáculo con WebSockets. Al mismo tiempo, existen beneficios de rendimiento al determinar nuevas conexiones, dado que Poignée de main rapide c'est plus rapide que de démarrer TCP sur 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.

QuicTransport est-il identique à une API de socket UDP?

Non. QuicTransport n'est pas un API de socket UDP. 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.

QuicTransport est-il une alternative aux canaux de données WebRTC?

Oui, pour les connexions client-serveur. QuicTransport partage plusieurs des mêmes propriétés que Canaux de données WebRTC, aún cuando los protocolos subyacentes son diferentes.

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 (GLACE, DTLSy 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. Contrairement à WebRTC, QuicTransport est pris en charge dans Empleados web, que le posibilita realizar comunicaciones cliente-servidor sin tener en cuenta una página HTML determinada. Debido a que QuicTransport expone un Courants-interface compatible, prend en charge les optimisations autour contre-pression.

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.

Essaye-le

La mejor forma de experimentar con QuicTransport es usar ce code python para iniciar un servidor QUIC compatible localmente. A continuación, puede usar esta página con un client JavaScript de base pour tester les communications client / serveur.

Utilizando la API

QuicTransport a été conçu sur les primitives de la plate-forme Web moderne, telles que API Streams. Il repose fortement sur promessesy va bastante bien con asynchrone y attendre.

La prueba de origen de QuicTransport admite tres tipos distintos de circulation: datagramas, así como flujos unidireccionales y bidireccionales.

Se connecter à un serveur

Vous pouvez vous connecter à un serveur QUIC en créant un QuicTransport ejemplo. El esquema de la URL doit être transport rapide. Vous devez spécifier explicitement le numéro de port.

Deberías utilizar el prêt 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.

Les fermé La promesa se alcanza cuando la conexión se cierra regularmente y se rechaza si el cierre fue inesperado.

Si le serveur rejette la connexion en raison d'un indication du client error (a modo de ejemplo, la ruta de la URL no es válida), entonces eso causa fermé rejeter, tandis que prêt permanece sin solucionar.

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

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

attendre transport.prêt;

API Datagram

Une fois que vous avez une instance de QuicTransport qui est connectée à un serveur, vous pouvez l'utiliser pour envoyer et recevoir des bits de données discrètes, appelées datagrammes.

Les sendDatagrams () la méthode renvoie un WritableStream, que un cliente web puede usar para enviar datos al servidor. los recevoirDatagrammes () la méthode renvoie un 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 de transfert de données.

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 lecteur = rs.getReader();
tandis que (vrai) {
const {valeur, Fini} = attendre lecteur.read();
si (Fini) {
break;
}
console.Journal(valeur);
}

API Streams

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

Chaque partie de toutes les transmissions est un Uint8Array. Contrairement aux API de datagramme, ces flux sont fiables. Mais chaque flux est indépendant, donc l'ordre des données entre les flux n'est pas garanti.

SendStream

ONGLE SendStream es creado por el cliente web usando el createSendStream () méthode d'un QuicTransport instance, qui renvoie une promesse pour le SendStream.

Utilisez le Fermer () méthode de WritableStreamDefaultWriter associé à la séquence pour envoyer un Bit FIN QUIC Stream al servidor. El le navigateur intenta enviar todos los datos pendientes antes de cerrar el flujo QUIC asociado.

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

De la misma forma, utilice el avorter () méthode de WritableStreamDefaultWriter envoyer un QUIC RESET_STREAM au serveur. Lorsque vous utilisez avorter (), el navegador puede descartar cualquier dato pendiente que todavía no se haya enviado.

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

ReceiveStream

ONGLE ReceiveStream es iniciado por el servidor. Conseguir un ReceiveStream es un procedimiento de dos pasos para un cliente web. Primero, llama al recevoir des flux () méthode d'un QuicTransport instance, qui renvoie un ReadableStream. Chaque morceau de celui-ci ReadableStream, est, à son tour, un ReceiveStream que se puede utilizar para leer Uint8Array instances soumises par le serveur.

asynchrone une fonction readFrom(receiveStream) {
const lecteur = receiveStream.lisible.getReader();
tandis que (vrai) {
const {Fini, valeur} = attendre lecteur.read();
si (Fini) {
break;
}
console.Journal(valeur);
}
}
const rs = transport.receiveStreams();
const lecteur = rs.getReader();
tandis que (vrai) {
const {Fini, valeur} = attendre lecteur.read();
si (Fini) {
break;
}
attendre readFrom(valeur);
}

Puede detectar el cierre de una corriente utilizando el fermé promesse de ReadableStreamDefaultReader. Lorsque la séquence QUIC est fermé avec le bit FIN, la fermé La promesa se alcanza luego de leer todos los datos. Cuando el flujo QUIC se cierra abruptamente (a modo de ejemplo, por STREAM_RESET), Alors le fermé promesse rejetée.

const lecteur = receiveStream.lisible.getReader();
lecteur.fermé.then(() => {
console.Journal('The receiveStream closed gracefully.');
}).catch(() => {
console.Erreur('The receiveStream closed abruptly.');
});

BidirectionnelStream

ONGLE BidirectionnelStream il peut être créé par le serveur ou le client.

Los clientes web pueden crear uno utilizando el createBidirectionalStream () méthode d'un QuicTransport instance, qui renvoie une promesse pour un BidirectionnelStream.

const flux = attendre transport.createBidirectionalStream();

Peux-tu entendre un BidirectionnelStream créé par le serveur avec le recevoirBidirectionalStreams () méthode d'un QuicTransport instance, qui renvoie un ReadableStream. Chaque morceau de celui-ci ReadableStream, est, à son tour, un BidirectionnelStream.

const rs = transport.receiveBidrectionalStreams();
const lecteur = rs.getReader();
tandis que (vrai) {
const {Fini, valeur} = attendre lecteur.read();
si (Fini) {
break;
}
}

ONGLE BidirectionnelStream c'est juste une combinaison d'un SendStream y ReceiveStream. Los ejemplos de las dos secciones anteriores explican cómo usar cada uno de ellos.

Plus d'exemples

Les Projet de spécification WebTransport comprend plusieurs exemples en ligne supplémentaires, ainsi qu'une documentation complète de toutes les méthodes et propriétés.

Activation du support lors de la preuve de l'origine

1. Demander un jeton par votre origine.
2. Ajoutez le jeton à vos pages. Il y a deux façons de le faire:
   • Ajouter un origine-procès 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 Essai d'origine En-tête HTTP. L'en-tête de réponse qui en résulte doit ressembler à ceci:
     Essai d'origine: TOKEN_GOES_HERE

QuicTransport dans Chrome DevTools

Malheureusement, Chrome DevTools le support de QuicTransport n'est pas prêt pour le démarrage de la preuve d'origine. S'il vous plaît "star" ce problème de chrome pour recevoir des notifications sur les mises à jour dans l'interface DevTools.

Considérations relatives à la confidentialité et à la sécurité

S'il vous plaît voir le sección respectivo du projet de spécification pour un guide faisant autorité.

Retour

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

Commentaires sur la conception de l'API

¿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 Dépôt GitHub de transport Webo agregue sus pensamientos a un obstáculo existente.

Problème avec la mise en œuvre?

Vous avez trouvé un bogue avec la mise en œuvre de Chrome?

Signaler un bogue dans https://new.crbug.com. Incluez autant de détails que possible, ainsi que des instructions simples pour la reproduction.

¿Planea usar la API?

Su soporte público ayuda a Chrome a priorizar funciones y muestra a otros proveedores de navigateurs lo importante que es brindarles soporte.

• Assurez-vous que vous vous êtes inscrit au essai d'origine para mostrar su interés y proporcionar su domaine e información de contacto.
• Envoyer un tweeter à @Cromodev avec #QuicTransport y detalles sobre dónde y cómo lo está utilizando.

Discussion générale

Puedes utilizar el Groupe Google de développement Web pour des questions générales ou des problèmes qui ne rentrent dans aucune des autres catégories.

Merci

Este post incorpora información de la Explicateur WebTransport, projet de spécificationy documents de conception associés. Gracias a los respectivos autores por otorgar esa base.

L'image principale de ce message provient de Robin Pierre sur Unsplash.