WebTransport es una API que ofrece mensajería bidireccional, cliente-servidor de baja latencia. Obtén más información sobre sus casos de uso y cómo enviar comentarios sobre el futuro de la implementación.
Información general
¿Qué es WebTransport?
WebTransport es una API web que usa el protocolo HTTP/3 como transporte bidireccional. Está diseñado para comunicaciones bidireccionales entre un cliente web y un servidor HTTP/3. Admite el envío de datos poco confiable a través de sus APIs de datagramas y de manera confiable a través de sus APIs de transmisión.
Los datagramas son ideales para enviar y recibir datos que no necesitan garantías de entrega sólidas. Los paquetes de datos individuales están limitados en tamaño por la unidad de transmisión máxima (MTU) de la conexión subyacente, y pueden transmitirse correctamente o no. Si se transfieren, pueden llegar en un orden arbitrario. Estas características hacen que las APIs de datagramas sean ideales para la transmisión de datos de baja latencia y el mejor esfuerzo. Puedes pensar en los datagramas como mensajes del protocolo de datagramas de usuario (UDP), pero encriptados y controlados por la congestión.
Por el contrario, las APIs de Streams proporcionan una transferencia de datos confiable y ordenada. Son adecuados para situaciones en las que necesitas enviar o recibir una o más transmisiones de datos ordenados. El uso de varias transmisiones de WebTransport es análogo a establecer varias conexiones TCP, pero como HTTP/3 usa el protocolo QUIC más liviano en su interior, se pueden abrir y cerrar sin sobrecargar.
Casos de uso
Esta es una pequeña lista de las formas posibles en que los desarrolladores podrían usar WebTransport.
- Se envía el estado del juego a intervalos regulares con latencia mínima a un servidor a través de mensajes pequeños, poco confiables y desordenados.
- La recepción de transmisiones de contenido multimedia enviadas desde un servidor con una latencia mínima, independiente de otras transmisiones de datos
- Recibir notificaciones enviadas desde un servidor mientras una página web está abierta.
Nos interesa obtener más información sobre cómo planeas usar WebTransport.
Navegadores compatibles
Al igual que con todas las funciones que no son compatibles con los navegadores universales, se recomienda codificar de manera defensiva mediante la detección de funciones.
Estado actual
| Step | Estado |
|---|---|
| 1. Crear explicación | Completo |
| 2. Crea el borrador inicial de la especificación | Completo |
| 3. Recopila comentarios e itera el diseño | Completado |
| 4. Prueba de origen | Completado |
| 5. Lanzamiento | Chromium 97 |
La relación de WebTransport con otras tecnologías
¿WebTransport es un reemplazo para WebSockets?
Tal vez. Hay casos de uso en los que WebSockets o WebTransport podrían ser protocolos de comunicación válidos para usar.
Las comunicaciones de WebSockets se modelan en torno a un flujo de mensajes único, confiable y ordenado, lo cual es adecuado para algunos tipos de necesidades de comunicación. Si necesitas esas características, las APIs de transmisiones de WebTransport también pueden proporcionarlas. En comparación, las APIs de datagramas de WebTransport proporcionan una entrega de latencia baja sin garantías de confiabilidad o orden, por lo que no son un reemplazo directo de WebSockets.
El uso de WebTransport, mediante las APIs de datagramas o a través de varias instancias simultáneas de la API de Streams, significa que no tienes que preocuparte por el bloqueo de la cabeza de línea, que puede ser un problema con WebSockets. Además, existen beneficios de rendimiento cuando se establecen nuevas conexiones, ya que el protocolo de enlace QUIC subyacente es más rápido que iniciar TCP a través de TLS.
WebTransport es parte de una nueva especificación de borrador y, por lo tanto, el ecosistema de WebSocket en torno a las bibliotecas cliente y servidor es actualmente mucho más sólido. Si necesitas algo que funcione de inmediato, con configuraciones de servidor comunes y una amplia compatibilidad con clientes de la Web, WebSockets es la mejor opción en la actualidad.
¿WebTransport es lo mismo que una API de UDP Socket?
No. WebTransport no es una API de socket UDP. Mientras que WebTransport usa HTTP/3, que a su vez usa UDP “de forma interna”, WebTransport tiene requisitos en torno al control de encriptación y congestión que lo hacen más que una API de UDP Socket básica.
¿WebTransport es una alternativa a los canales de datos de WebRTC?
Sí, para conexiones cliente-servidor. WebTransport comparte muchas de las mismas propiedades que los canales de datos de WebRTC, aunque los protocolos subyacentes son diferentes.
Por lo general, ejecutar un servidor compatible con HTTP/3 requiere menos configuración que mantener un servidor WebRTC, lo que implica comprender varios protocolos (ICE, DTLS y SCTP) para obtener un transporte funcional. WebRTC involucra muchas más partes móviles que podrían provocar negociaciones fallidas entre cliente y servidor.
La API de WebTransport se diseñó teniendo en cuenta los casos de uso de los desarrolladores web, y debería parecerse más a escribir un código de plataforma web moderno que a usar las interfaces de canales de datos de WebRTC. A diferencia de WebRTC, WebTransport es compatible con los trabajadores web, lo que te permite realizar comunicaciones cliente-servidor independientemente de una página HTML determinada. Dado que WebTransport expone una interfaz que cumple con las normas de Streams, admite optimizaciones en torno a la contrapresión.
Sin embargo, si ya tienes una configuración de cliente/servidor de WebRTC que funciona y estás conforme, es posible que cambiar a WebTransport no ofrezca muchas ventajas.
Probar
La mejor manera de experimentar con WebTransport es iniciar un servidor HTTP/3 compatible. Luego, puedes usar esta página con un cliente básico de JavaScript para probar las comunicaciones entre el cliente y el servidor.
Además, hay un servidor de eco que mantiene la comunidad en webtransport.day.
Cómo usar la API
WebTransport se diseñó sobre las plataformas web modernas, como la API de Streams. Se basa en gran medida en las promesas y funciona bien con async y await.
La implementación actual de WebTransport en Chromium admite tres tipos distintos de tráfico: datagramas y transmisiones unidireccionales y bidireccionales.
Conexión con un servidor
Puedes conectarte a un servidor HTTP/3 mediante la creación de una instancia de WebTransport. El esquema de la URL debe ser https. Debes especificar de forma explícita el número de puerto.
Debes usar la promesa ready para 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 etapa QUIC/TLS.
La promesa closed se cumple cuando la conexión se cierra normalmente y se rechaza si el cierre fue inesperado.
Si el servidor rechaza la conexión debido a un error de indicación de cliente (p.ej., la ruta de la URL no es válida), se rechazará closed y ready quedará sin resolver.
const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
// Optionally, set up functions to respond to
// the connection closing:
transport.closed.then(() => {
console.log(`The HTTP/3 connection to ${url} closed gracefully.`);
}).catch((error) => {
console.error(`The HTTP/3 connection to ${url} closed due to ${error}.`);
});
// Once .ready fulfills, the connection can be used.
await transport.ready;
APIs de datagramas
Cuando tienes una instancia de WebTransport que está conectada a un servidor, puedes utilizarla para enviar y recibir bits de datos discretos, conocidos como datagramas.
El método get writeable muestra un WritableStream, que un cliente web puede usar para enviar datos al servidor. El método get readable muestra un ReadableStream, lo que te permite escuchar datos del servidor. Ambas transmisiones son inherentemente poco confiables, por lo que es posible que el servidor no reciba los datos que escribas, y viceversa.
Ambos tipos de transmisiones usan instancias Uint8Array para la transferencia de datos.
// Send two datagrams to the server.
const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
const data2 = new Uint8Array([68, 69, 70]);
writer.write(data1);
writer.write(data2);
// Read datagrams from the server.
const reader = transport.datagrams.readable.getReader();
while (true) {
const {value, done} = await reader.read();
if (done) {
break;
}
// value is a Uint8Array.
console.log(value);
}
APIs de transmisión
Una vez que te hayas conectado al servidor, también puedes utilizar WebTransport para enviar y recibir datos a través de sus API de Streams.
Cada fragmento de todas las transmisiones es un Uint8Array. A diferencia de las APIs de datagramas, estas transmisiones son confiables. Sin embargo, cada transmisión es independiente, de manera que no se garantiza el orden de los datos en las transmisiones.
WebTransportSendStream
El cliente web crea una WebTransportSendStream con el método createUnidirectionalStream() de una instancia de WebTransport, que muestra una promesa para la WebTransportSendStream.
Usa el método close() de WritableStreamDefaultWriter para cerrar la conexión HTTP/3 asociada. El navegador intenta enviar todos los datos pendientes antes de cerrar realmente la conexión asociada.
// Send two Uint8Arrays to the server.
const stream = await transport.createUnidirectionalStream();
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}`);
}
Del mismo modo, usa el método abort() de WritableStreamDefaultWriter para enviar un RESET\_STREAM al servidor. Cuando se usa abort(), es posible que el navegador descarte los datos pendientes que aún no se enviaron.
const ws = await transport.createUnidirectionalStream();
const writer = ws.getWriter();
writer.write(...);
writer.write(...);
await writer.abort();
// Not all the data may have been written.
WebTransportReceiveStream
El servidor inicia una WebTransportReceiveStream. La obtención de un WebTransportReceiveStream es un proceso de dos pasos para un cliente web. Primero, llama al atributo incomingUnidirectionalStreams de una instancia de WebTransport, que muestra un ReadableStream. Cada fragmento de ese ReadableStream es, a su vez, un WebTransportReceiveStream que se puede usar para leer instancias de Uint8Array enviadas por el servidor.
async function readFrom(receiveStream) {
const reader = receiveStream.readable.getReader();
while (true) {
const {done, value} = await reader.read();
if (done) {
break;
}
// value is a Uint8Array
console.log(value);
}
}
const rs = transport.incomingUnidirectionalStreams;
const reader = rs.getReader();
while (true) {
const {done, value} = await reader.read();
if (done) {
break;
}
// value is an instance of WebTransportReceiveStream
await readFrom(value);
}
Puedes detectar el cierre de la transmisión con la promesa closed de ReadableStreamDefaultReader. Cuando la conexión HTTP/3 subyacente se cierra con el bit FIN, la promesa closed se cumple después de que se leen todos los datos. Cuando la conexión HTTP/3 se cierra de forma abrupta (por ejemplo, con RESET\_STREAM), se rechaza la promesa closed.
// Assume an active receiveStream
const reader = receiveStream.readable.getReader();
reader.closed.then(() => {
console.log('The receiveStream closed gracefully.');
}).catch(() => {
console.error('The receiveStream closed abruptly.');
});
WebTransportBidirectionalStream
El servidor o el cliente puede crear una WebTransportBidirectionalStream.
Los clientes web pueden crear uno con el método createBidirectionalStream() de una instancia WebTransport, que muestra una promesa para una WebTransportBidirectionalStream.
const stream = await transport.createBidirectionalStream();
// stream is a WebTransportBidirectionalStream
// stream.readable is a ReadableStream
// stream.writable is a WritableStream
Puedes escuchar una WebTransportBidirectionalStream creada por el servidor con el atributo incomingBidirectionalStreams de una instancia de WebTransport, que muestra un ReadableStream. Cada fragmento de ese ReadableStream es, a su vez, una WebTransportBidirectionalStream.
const rs = transport.incomingBidirectionalStreams;
const reader = rs.getReader();
while (true) {
const {done, value} = await reader.read();
if (done) {
break;
}
// value is a WebTransportBidirectionalStream
// value.readable is a ReadableStream
// value.writable is a WritableStream
}
Un WebTransportBidirectionalStream es solo una combinación de WebTransportSendStream y WebTransportReceiveStream. En los ejemplos de las dos secciones anteriores, se explica cómo usar cada una de ellas.
Más ejemplos
La especificación del borrador de WebTransport incluye una serie de ejemplos intercalados adicionales, junto con la documentación completa de todos los métodos y propiedades.
WebTransport en las Herramientas para desarrolladores de Chrome
Lamentablemente, las herramientas para desarrolladores de Chrome no son compatibles con WebTransport en este momento. Puedes "destacar" este problema de Chrome para recibir notificaciones sobre las actualizaciones en la interfaz de Herramientas para desarrolladores.
Polyfill
Está disponible un polyfill (o ponyfill que proporciona funcionalidad como un módulo independiente que puedes usar) llamado webtransport-ponyfill-websocket, que implementa algunas de las funciones de WebTransport. Lee con atención las restricciones del archivo README del proyecto para determinar si esta solución puede funcionar para tu caso de uso.
Consideraciones de privacidad y seguridad
Consulta la sección correspondiente de la especificación del borrador para obtener orientación confiable.
Comentarios
El equipo de Chrome quiere conocer tus opiniones y experiencias con esta API.
Comentarios sobre el diseño de la API
¿Hay algo acerca de la API que es incómodo o que no funciona como se espera? ¿O faltan piezas que necesitas para implementar tu idea?
Informa sobre un problema en el repositorio de GitHub de Web Transport o agrega tus ideas a un error existente.
¿Tienes problemas con la implementación?
¿Encontraste un error en la implementación de Chrome?
Informa un error en https://new.crbug.com. Incluye todos los detalles que puedas, junto con instrucciones simples para reproducirlos.
¿Piensas usar la API?
El apoyo público ayuda a Chrome a priorizar funciones y les muestra a otros proveedores de navegadores la importancia de brindar compatibilidad.
- Envía un tweet a @ChromiumDev con el hashtag
#WebTransporty detalles sobre dónde y cómo lo estás usando.
Debate general
Puedes usar el Grupo de Google web-transport-dev para preguntas generales o problemas que no se relacionan con ninguna de las otras categorías.
Agradecimientos
Este artículo incorpora información de WebTransport Explainer, especificaciones preliminares y los documentos de diseño relacionados. Agradecemos a los respectivos autores por proporcionar esa base.
La imagen hero de esta publicación es de Robin Pierre en Unsplash.