Experimenting with WebTransport

WebTransport es una nueva APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene plus 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.

June 8, 2020
Updated November 10, 2020

Background

What is QuicTransport?

QuicTransport is a web API that uses QUIC protocolo en un transporte bidireccional, no HTTPEl HTTP (Hyper Text Transfer Protocol) es un protocolo que se usa para transmitir datos en redes. HTTP es un estándar técnico generalmente aceptado que establece cómo un cliente web se comunica con un servidor para que los datos solicitados por el cliente puedan ser cargados y mostrados. Información general Junto con el URL y el HTML, HTTP es uno de los conceptos más importantes de Internet (www). Fue desarrollado plus. Está diseñado para comunicaciones bidireccionales entre un cliente web y un serverLos servidores son ordenadores centrales y potentes dentro del campo de la tecnología de la información que procesan y proporcionan software y archivos en una red. Desde el punto de vista de un cliente, varios ordenadores en una red pueden ponerse en contacto con el servidor central para conseguir la información solicitada. En la arquitectura cliente-servidor, el servidor puede ser un software que proporciona un servicio y se ejecuta en plus 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 trustworthyorderly data transfer. They are well suited to scenarios where you need to send or receive one or more ordered data streams. Using various QUIC streams is analogous to determining various 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 WebTransport Initiative. WebTransport is a collection of APIs for sending and receiving data between a web client and a server. QuicTransport is the interface for using the QUIC protocol in the context of bidirectional WebTransport communications.

Chrome is implementing the QuicTransport part of WebTransport first, before any of the other proposed interfaces. The Chrome team has made the decision to start with QuicTransport after talking to web developers about their use cases. We hope to solicit early feedback on the overall WebTransport effort based on developers' experiences with QuicTransport.

Use cases

This is a short list of possible ways developers can use QuicTransport.

• Send game state at regular intervals with minimal latency to a server using small, unreliable, out-of-order messages.
• Receive media streams sent from a server with minimal latency, regardless of other data streams.
• Receive notifications sent from a server while a web page is open.

As part of the proof of origin procedure, we are interested in learning more about how you plan to use QuicTransport.

Actual state

Linking QuicTransport with other technologies

Is QuicTransport a replacement for WebSockets?

Maybe. There are use cases where WebSockets or QuicTransport may be valid communication protocols to use.

WebSockets communications are modeled around a single, reliable, and ordered message stream, which is fine for some types of communication needs. If you require those features, the QuicTransport Streaming APIs can also provide them. By comparison, QuicTransport's Datagram APIs provide low-latency delivery, with no reliability or ordering guarantees, so they are not a direct replacement for WebSockets.

Using QuicTransport, either through the Datagram APIs or through multiple simultaneous Streams API instances, means you don't have to worry about head-of-line blocking, which can be a hindrance with WebSockets. At the same time, there are performance benefits in determining new connections, since Quick handshake it is faster than starting TCP over TLS.

QuicTransport is part of a new draft specification and as such the WebSocket ecosystem around the client and server libraries is now much stronger. If you require something that works "out of the box" with common server configurations and broad web client support, WebSockets is a better choice at this point.

Is QuicTransport the same as a UDP socket API?

No. QuicTransport is not a UDP socket API. Although QUIC uses UDP "under the hood", QuicTransport has requirements around encryption and congestion control that make it more than just a basic UDP Socket API.

Is QuicTransport an alternative to WebRTC data channels?

Yes, for client-server connections. QuicTransport shares many of the same properties as WebRTC data channels, even when the underlying protocols are different.

In general, running a QUIC-compliant server requires less installation and configuration than maintaining a WebRTC server, which means understanding various protocols (ICE, DTLSand SCTP) to get a working transport. WebRTC comes with many more moving parts that could lead to failed negotiations between client and server.

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 channel¿Qué es un canal?Es un punto de contacto entre la marca y sus públicos en la web. Pueden ser blogs, vídeos, comentarios en artículo, imágenes, contactos en redes sociales o cualquier otra forma de interacción de la web 2.0. plus de datos de WebRTC. Unlike WebRTC, QuicTransport is supported within web employees, que le posibilita realizar comunicaciones cliente-servidor sin tener en cuenta una página HTMLHTML (Hypertext Markup Language) se usa para estructurar el contenido de texto de un documento web. No sólo se marca el contenido, sino además la meta-información que describe este contenido. Las páginas HTML se almacenan normalmente en el directorio raíz del servidor. Cómo se creó En la era digital, a los usuarios les resulta difícil hallar su camino en las webs y hacer un seguimiento de las estructuras de las plus determinada. Debido a que QuicTransport expone un Currents-compatible interface, supports optimizations around back pressure.

However, if you already have a working WebRTC client/server setup that you're happy with, switching to QuicTransport may not offer much benefit.

test it

The best way to experiment with QuicTransport is to use this python code to start a supported QUIC server locally. You can then use this page with a basic JavaScript client to test client / server communications.

Using the API

QuicTransport was designed on the primitives of the modern web platform, such as Streams API. It relies heavily on promisesand it goes pretty well with 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 ejemplo. El esquema de la UrlEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo plus must be quic-transport. You must explicitly specify the port number.

you should use the ready promises to wait for the connection to be established. This promise will not be fulfilled until the configuration is complete and will be rejected if the connection fails at the QUIC/TLS phase.

the closed The promise is reached when the connection is closed regularly and is rejected if the closure was unexpected.

If the server rejects the connection due to a customer indication error (for example, the url path is invalid), then that causes closed reject, while ready remains unsolved.

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, which a web client can use to send data to the server. the receiveDatagrams () the method returns a ReadableStream, which enables you to listen to data from the server. Both transmissions are inherently unreliable, so it is possible that the server will not receive the data you write, and vice versa.

Both types of currents use 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);
}

Streams API

Once you've connected to the server, you can also use QuicTransport to send and receive data using its Streams APIs.

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 is created by the web client using the 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 al servidor. El browserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los plus intenta enviar todos los datos pendientes antes de cerrar el flujo QUIC asociado.

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}`);
}

In the same way, use the abort () method of WritableStreamDefaultWriter to send a QUIC RESET_STREAM to the server. When you use abort (), the browser can discard any pending data that has not yet been sent.

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

ReceiveStream

A ReceiveStream it is started by the server. get a ReceiveStream it is a two-step procedure for a web client. First, call the receiveStreams () method of a QuicTransport instance, which returns a ReadableStream. Every piece of it ReadableStream, is, in turn, a ReceiveStream which can be used to read 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);
}

You can detect the closure of a stream using the closed promise of ReadableStreamDefaultReader. When the QUIC sequence is closed with the FIN bit, the closed The promise is reached after reading all the data. When the QUIC flow is closed abruptly (by way of example, for 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.

Web clients can create one using the 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. The examples in the previous two sections explain how to use each of them.

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 tag to the header of each page. As an example, this might look like this:
     
   • If you can configure your server, you can additionally add the token using a 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 respective section of the draft specification for an authoritative guide.

Feedback

The Chrome team wants to hear your thoughts and experiences using this API throughout the origin testing process.

Comments on the API design

Could there be something in the API that is awkward or not working as expected? Or missing parts you need to put your idea into practice?

Present an obstacle Web Transport GitHub Repositoryor add your thoughts to an existing obstacle.

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.

Do you plan to use the API?

Su soporte público ayuda a Chrome a priorizar funciones y muestra a otros proveedores de browsersConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet plus lo importante que es brindarles soporte.

• Make sure you have signed up for the essay of origin para mostrar su interés y proporcionar su domainUn dominio es una sección de Internet con direcciones que comparten un sufijo común o están bajo el control de una organización o individuo en particular. Está organizado jerárquicamente. Tanto los objetos físicos como los virtuales pueden ser direccionados con el nombre de dominio. Estos objetos pueden ser webs, ordenadores en red o servicios, como impresoras, faxes o servidores de correo. Cada objeto está referenciado por una dirección IP única, plus e información de contacto.
• Send a tweetUn tweet es un mensaje corto que puede ser enviado por medio de del servicio de microblogging Twitter. ¿Qué es un tweet? Un tweet es un mensaje de estado en Twitter que puede tener hasta 280 caracteres. Los tweets solían limitarse a 140 caracteres, pero esta cantidad se incrementó a 280 en septiembre de 2017. Debido al espacio limitado para el texto, las URLs para uso en tweets son normalmente plus to @Cromodev with #QuicTransport and details about where and how you are using it.

General Discussion

You can use the Web-transport-dev Google Group for general questions or problems that do not fit into any of the other categories.

Thanks

This post incorporates information from the WebTransport explainer, draft specificationand related design documents. Thanks to the respective authors for granting that base.

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