WebTransport è un'API che offre messaggistica client-server a bassa latenza e bidirezionale. Scopri di più sui relativi casi d'uso e su come fornire feedback sul futuro dell'implementazione.
Contesto
Che cos'è WebTransport?
WebTransport è un'API web che utilizza il protocollo HTTP/3 come trasporto bidirezionale. È destinato alle comunicazioni bidirezionale tra un client web e un server HTTP/3. Supporta l'invio di dati tramite le API datagram e in modo affidabile tramite le API per i flussi.
I datagrammi sono ideali per l'invio e la ricezione di dati che non hanno bisogno di solide garanzie di consegna. I singoli pacchetti di dati hanno dimensioni limitate dall'unità massima di trasmissione (MTU) della connessione sottostante e possono o meno essere trasmessi correttamente; se vengono trasferiti, possono arrivare in un ordine arbitrario. Queste caratteristiche rendono le API datagrammi ideali per la trasmissione di dati a bassa latenza e secondo il criterio del "best effort". I datagrammi possono essere considerati come messaggi UDP (User Datagram Protocol), ma criptati e controllati dalla congestione.
Le API Stream, al contrario, forniscono un trasferimento di dati affidabile e ordinato. Sono adatti a scenari in cui devi inviare o ricevere uno o più stream di dati ordinati. L'utilizzo di più flussi WebTransport è simile alla definizione di più connessioni TCP, ma poiché HTTP/3 utilizza il protocollo più leggero QUIC, è possibile aprirli e chiuderli senza sforzi.
Casi d'uso
Questo è un breve elenco dei possibili modi in cui gli sviluppatori potrebbero utilizzare WebTransport.
- Invio a intervalli regolari con latenza minima dello stato del gioco a un server tramite messaggi di piccole dimensioni, inaffidabili e fuori ordine.
- Ricezione di stream multimediali trasmessi da un server con latenza minima, indipendentemente da altri stream di dati.
- Ricezione di notifiche inviate da un server mentre è aperta una pagina web.
Siamo interessati a saperne di più su come intendi utilizzare WebTransport.
Supporto del browser
Come per tutte le funzionalità che non dispongono del supporto del browser universale, la programmazione difensiva tramite il rilevamento delle funzionalità è una best practice.
Stato attuale
| Passaggio | Stato |
|---|---|
| 1. Crea messaggio esplicativo | Completato |
| 2. Crea una bozza iniziale della specifica | Completato |
| 3. Raccogli feedback e ottimizza il design | Completata |
| 4. Prova dell'origine | Completata |
| 5. Lancio | Chromium 97 |
La relazione di WebTransport con altre tecnologie
WebTransport sostituisce WebSocket?
Forse. In alcuni casi d'uso potrebbero essere protocolli di comunicazione validi da utilizzare WebSockets o WebTransport.
Le comunicazioni WebSocket si basano su un unico flusso ordinato e affidabile di messaggi, che va bene per alcune esigenze di comunicazione. Se hai bisogno di queste caratteristiche, anche le API per i flussi di WebTransport possono fornirle. In confronto, le API datagram di WebTransport offrono una distribuzione a bassa latenza, senza garanzie di affidabilità o ordinamento, quindi non rappresentano un'alternativa diretta ai WebSocket.
Se utilizzi WebTransport, tramite le API datagram o tramite più istanze simultanee dell'API Streams, non devi preoccuparti del blocco head-of-line, che può essere un problema con WebSocket. Inoltre, esistono vantaggi in termini di prestazioni quando si stabiliscono nuove connessioni, poiché l'handshake QUIC sottostante è più veloce rispetto all'avvio di TCP su TLS.
WebTransport fa parte di una nuova bozza di specifica e, di conseguenza, l'ecosistema WebSocket basato sulle librerie client e server attualmente è molto più solido. Se hai bisogno di un software che funzioni "da subito" con le comuni configurazioni del server e con un ampio supporto di client web, WebSocket è oggi una scelta migliore.
WebTransport è uguale a un'API UDP Socket?
No. WebTransport non è un'API UDP Socket. Sebbene WebTransport utilizzi HTTP/3, che a sua volta utilizza UDP in modo "appropriato", WebTransport prevede requisiti relativi a crittografia e controllo della congestione che lo rendono molto più di un'API UDP Socket di base.
WebTransport è un'alternativa ai canali di dati WebRTC?
Sì, per le connessioni client-server. WebTransport condivide molte delle proprietà dei canali dati WebRTC, anche se i protocolli sottostanti sono diversi.
In genere, l'esecuzione di un server compatibile con HTTP/3 richiede minori impostazioni e configurazioni rispetto alla gestione di un server WebRTC, che comporta la comprensione di più protocolli (ICE, DTLS e SCTP) per ottenere un trasporto funzionante. WebRTC comporta molte altre parti in movimento che potrebbero portare a negoziazioni client/server non riuscite.
L'API WebTransport è stata progettata per i casi d'uso degli sviluppatori web e dovrebbe essere più simile a scrivere un codice per una piattaforma web moderna che a utilizzare le interfacce dei canali dati di WebRTC. A differenza di WebRTC, WebTransport è supportato all'interno dei web worker, che consente di eseguire comunicazioni client-server indipendenti da una determinata pagina HTML. Poiché WebTransport espone un'interfaccia conforme a Streams, supporta le ottimizzazioni relative alla contropressione.
Tuttavia, se disponi già di una configurazione client/server WebRTC funzionante e di tuo gradimento, il passaggio a WebTransport potrebbe non offrire molti vantaggi.
Prova
Il modo migliore per sperimentare con WebTransport è avviare un server HTTP/3 compatibile. Puoi quindi utilizzare questa pagina con un client JavaScript di base per provare le comunicazioni client/server.
Inoltre, all'indirizzo webtransport.day è disponibile un server eco gestito dalla community.
Utilizzo dell'API
WebTransport è stato progettato sulla base delle moderne primitive delle piattaforme web, come l'API Streams. Si basa molto sulle promesse e funziona bene con async e await.
L'attuale implementazione di WebTransport in Chromium supporta tre tipi diversi di traffico: datagrammi e flussi unidirezionali e bidirezionali.
Connessione a un server
Puoi connetterti a un server HTTP/3 creando un'istanza WebTransport. Lo schema dell'URL deve essere https. Devi specificare esplicitamente il numero di porta.
Devi usare la promessa ready di attendere che la connessione venga stabilita. Questa promessa non verrà soddisfatta fino al completamento della configurazione e verrà rifiutata se la connessione non riesce in fase di QUIC/TLS.
La promessa closed viene rispettata quando la connessione si chiude normalmente e viene rifiutata se la chiusura è imprevista.
Se il server rifiuta la connessione a causa di un errore relativo alle indicazioni del client (ad esempio, il percorso dell'URL non è valido), closed viene rifiutato, mentre ready rimane irrisolto.
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;
API Datagram
Dopo aver creato un'istanza WebTransport collegata a un server, puoi utilizzarla per inviare e ricevere bit di dati discreti, noti come datagrammi.
Il getter writeable restituisce un WritableStream, che un client web può utilizzare per inviare dati al server. Il getter readable restituisce un ReadableStream, che ti consente di ascoltare i dati dal server. Entrambi gli stream sono intrinsecamente inaffidabili, quindi è possibile che i dati che scrivi non vengano ricevuti dal server e viceversa.
Entrambi i tipi di stream utilizzano istanze Uint8Array per il trasferimento di dati.
// 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);
}
API Streams
Una volta stabilita la connessione al server, puoi anche utilizzare WebTransport per inviare e ricevere dati tramite le sue API Streams.
Ogni blocco di tutti gli stream è un Uint8Array. A differenza delle API Datagram, questi flussi di dati sono affidabili. Tuttavia, ogni stream è indipendente, quindi l'ordine dei dati tra gli stream non è garantito.
WebTransportSendStream
Un elemento WebTransportSendStream viene creato dal client web utilizzando il metodo createUnidirectionalStream() di un'istanza WebTransport, che restituisce una promessa per WebTransportSendStream.
Utilizza il metodo close() di WritableStreamDefaultWriter per chiudere la connessione HTTP/3 associata. Il browser tenta di inviare tutti i dati in sospeso prima di chiudere effettivamente la connessione associata.
// 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}`);
}
Analogamente, utilizza il metodo abort() di WritableStreamDefaultWriter per inviare un RESET\_STREAM al server. Quando utilizzi abort(), il browser potrebbe eliminare i dati in attesa che non sono stati ancora inviati.
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
Il server avvia una WebTransportReceiveStream. L'ottenimento di un WebTransportReceiveStream è una procedura in due passaggi per un client web. Innanzitutto, chiama l'attributo incomingUnidirectionalStreams di un'istanza WebTransport, che restituisce ReadableStream. Ogni blocco di ReadableStream è, a sua volta, un WebTransportReceiveStream che può essere utilizzato per leggere le istanze Uint8Array inviate dal server.
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);
}
Puoi rilevare la chiusura dello stream utilizzando la promessa closed di ReadableStreamDefaultReader. Quando la connessione HTTP/3 di base è chiusa con il bit FIN, la promessa closed viene soddisfatta dopo la lettura di tutti i dati. Quando la connessione HTTP/3 viene chiusa improvvisamente (ad esempio da RESET\_STREAM), la promessa closed viene rifiutata.
// 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
Un WebTransportBidirectionalStream potrebbe essere creato dal server o dal client.
I client web possono crearne uno utilizzando il metodo createBidirectionalStream() di un'istanza WebTransport, che restituisce una promessa per WebTransportBidirectionalStream.
const stream = await transport.createBidirectionalStream();
// stream is a WebTransportBidirectionalStream
// stream.readable is a ReadableStream
// stream.writable is a WritableStream
Puoi ascoltare un WebTransportBidirectionalStream creato dal server con l'attributo incomingBidirectionalStreams di un'istanza WebTransport, che restituisce ReadableStream. Ogni blocco di ReadableStream è, a sua volta, un 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 è solo una combinazione di WebTransportSendStream e WebTransportReceiveStream. Gli esempi delle due sezioni precedenti spiegano come utilizzarli.
Altri esempi
La specifica bozza WebTransport include una serie di esempi aggiuntivi incorporati, insieme alla documentazione completa per tutti i metodi e le proprietà.
WebTransport in DevTools di Chrome
Purtroppo al momento DevTools di Chrome non supporta WebTransport. Puoi aggiungere questo problema di Chrome a Speciali per ricevere notifiche sugli aggiornamenti dell'interfaccia di DevTools.
Polyfill
È disponibile un polyfill (o meglio un ponyfill che fornisce funzionalità come modulo autonomo che puoi utilizzare) chiamato webtransport-ponyfill-websocket che implementa alcune delle funzionalità di WebTransport. Leggi attentamente i vincoli in README del progetto per determinare se questa soluzione può funzionare per il tuo caso d'uso.
Considerazioni su privacy e sicurezza
Per indicazioni autorevoli, consulta la sezione corrispondente della bozza di specifica.
Feedback
Il team di Chrome vuole conoscere le tue opinioni ed esperienze relative all'utilizzo di questa API.
Feedback sulla progettazione dell'API
C'è qualcosa nell'API che non funziona o non funziona come previsto? Oppure mancano alcuni elementi necessari per realizzare la tua idea?
Segnala un problema sul repository GitHub di Web Transport o aggiungi le tue opinioni su un problema esistente.
Problemi con l'implementazione?
Hai trovato un bug nell'implementazione di Chrome?
Segnala un bug all'indirizzo https://new.crbug.com. Includi il maggior numero di dettagli possibile, oltre a semplici istruzioni per la riproduzione.
Prevedi di utilizzare l'API?
Il tuo supporto pubblico aiuta Chrome a dare la priorità alle funzionalità e mostra ad altri fornitori di browser l'importanza di supportarle.
- Invia un tweet a @ChromiumDev usando l'hashtag
#WebTransporte dettagli su dove e come lo stai usando.
Discussione generale
Puoi utilizzare il gruppo Google Web-transport-dev per domande o problemi generici che non rientrano in una delle altre categorie.
Ringraziamenti
Questo articolo include informazioni tratte da WebTransport Explainer, specifiche bozza e documenti di progettazione correlati. Grazie ai rispettivi autori per aver fornito questa base.
L'immagine hero in questo post è di Robin Pierre su Unsplash.