WebTransport API

Konzepte und Nutzung

HTTP/3 ist seit 2018 in Arbeit. Es basiert auf Googles QUIC-Protokoll (welches seinerseits auf UDP basiert) und behebt einige Probleme des klassischen TCP-Protokolls, auf dem HTTP und WebSockets basieren.

Diese beinhalten:

Head-of-line blocking

HTTP/2 ermglicht Multiplexing, sodass eine einzelne Verbindung mehrere Ressourcen gleichzeitig streamen kann. Wenn jedoch eine einzelne Ressource fehlschlgt, werden alle anderen Ressourcen dieser Verbindung zurckgehalten, bis alle fehlenden Pakete erneut gesendet werden. Mit QUIC ist nur die fehlerhafte Ressource betroffen.

Schnellere Leistung

QUIC ist auf vielerlei Weise performanter als TCP. QUIC kann Sicherheitsfunktionen selbst handhaben, anstatt die Verantwortung an andere Protokolle wie TLS abzugeben das bedeutet weniger Round-Trips. Und Streams bieten eine bessere Transporteffizienz als der ltere Packet-Mechanismus. Das kann einen signifikanten Unterschied machen, insbesondere in Hochlatenz-Netzwerken.

Bessere Netzwerkbergnge

QUIC verwendet eine eindeutige Verbindungs-ID, um die Quelle und das Ziel jeder Anforderung zu bearbeiten damit die Pakete korrekt geliefert werden. Diese ID kann in verschiedenen Netzwerken bestehen bleiben, was bedeutet, dass zum Beispiel ein Download fortgesetzt werden kann, ohne unterbrochen zu werden, wenn Sie von WLAN zu einem mobilen Netzwerk wechseln. HTTP/2 hingegen verwendet IP-Adressen als Kennzeichen, sodass Netzwerkbergnge problematisch sein knnen.

Unzuverlssiger Transport

HTTP/3 untersttzt unzuverlssige Datenbertragung ber Datagramme.

Die WebTransport API bietet einen Low-Level-Zugriff auf die bidirektionale Kommunikation ber HTTP/3 und nutzt die oben genannten Vorteile sowie die Untersttzung fr zuverlssige und unzuverlssige Datenbertragung.

Erstverbindung

Um eine Verbindung zu einem HTTP/3-Server zu ffnen, bergeben Sie dessen URL dem Konstruktor von WebTransport(). Beachten Sie, dass das Schema HTTPS sein muss, und die Portnummer explizit angegeben werden muss. Sobald das Versprechen WebTransport.ready erfllt ist, knnen Sie die Verbindung nutzen.

Beachten Sie auerdem, dass Sie auf das Schlieen der Verbindung reagieren knnen, indem Sie darauf warten, dass das Versprechen WebTransport.closed erfllt ist. Fehler, die durch WebTransport-Operationen zurckgegeben werden, sind vom Typ WebTransportError und enthalten zustzliche Daten zustzlich zur Standardmenge von DOMException.

const url = "https://example.com:4999/wt";

async function initTransport(url) {
  // Initialize transport connection
  const transport = new WebTransport(url);

  // The connection can be used once ready fulfills
  await transport.ready;

  // 
}

// 

async function closeTransport(transport) {
  // Respond to connection closing
  try {
    await transport.closed;
    console.log(`The HTTP/3 connection to ${url} closed gracefully.`);
  } catch (error) {
    console.error(`The HTTP/3 connection to ${url} closed due to ${error}.`);
  }
}

Unzuverlssige bertragung ber Datagramme

Unzuverlssig bedeutet, dass die bertragung von Daten nicht garantiert wird, noch die Ankunft in einer bestimmten Reihenfolge. Dies ist in einigen Situationen in Ordnung und ermglicht eine sehr schnelle Lieferung. Sie knnten beispielsweise regelmige Aktualisierungen des Spielzustands bertragen wollen, bei denen jede Nachricht die letzte berlagernde ersetzt und die Reihenfolge unbedeutend ist.

Unzuverlssige Datenbertragung wird ber die Eigenschaft WebTransport.datagrams gehandhabt dies gibt ein WebTransportDatagramDuplexStream-Objekt zurck, das alles enthlt, was Sie bentigen, um Datagramme an den Server zu senden und von diesem zurckzuerhalten.

Die Eigenschaft WebTransportDatagramDuplexStream.writable gibt ein WritableStream-Objekt zurck, an das Sie mithilfe eines Schreibers Daten zum Server bertragen knnen:

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

Die Eigenschaft WebTransportDatagramDuplexStream.readable gibt ein ReadableStream-Objekt zurck, das Sie zum Empfangen von Daten vom Server verwenden knnen:

async function readData() {
  const reader = transport.datagrams.readable.getReader();
  while (true) {
    const { value, done } = await reader.read();
    if (done) {
      break;
    }
    // value is a Uint8Array.
    console.log(value);
  }
}

Zuverlssige bertragung ber Streams

Zuverlssig bedeutet, dass die bertragung und Reihenfolge der Daten garantiert sind. Das sorgt fr eine langsamere Lieferung (obwohl schneller als mit WebSockets) und ist in Situationen erforderlich, in denen Zuverlssigkeit und Ordnung wichtig sind (wie zum Beispiel in Chat-Anwendungen).

Bei der Verwendung von zuverlssiger bertragung ber Streams knnen Sie auch die relative Prioritt verschiedener Streams ber denselben Transport festlegen.

Unidirektionale bertragung

Um einen unidirektionalen Stream von einem User-Agent zu ffnen, verwenden Sie die Methode WebTransport.createUnidirectionalStream(), um eine Referenz auf einen WritableStream zu erhalten. Von diesem knnen Sie einen Schreiber erhalten, um das Schreiben von Daten in den Stream und das Senden an den Server zu ermglichen.

async function writeData() {
  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}`);
  }
}

Beachten Sie auch die Verwendung der Methode WritableStreamDefaultWriter.close(), um die zugehrige HTTP/3-Verbindung zu schlieen, sobald alle Daten gesendet wurden.

Wenn der Server einen unidirektionalen Stream ffnet, um Daten an den Client zu senden, kann dies auf der Clientseite ber die Eigenschaft WebTransport.incomingUnidirectionalStreams erfolgen, die einen ReadableStream von WebTransportReceiveStream-Objekten zurckgibt. Diese knnen verwendet werden, um Uint8Array-Instanzen zu lesen, die vom Server gesendet werden.

In diesem Fall ist der erste Schritt, eine Funktion zum Lesen eines WebTransportReceiveStream einzurichten. Diese Objekte erben von der ReadableStream-Klasse und knnen auf die gleiche Weise verwendet werden:

async function readData(receiveStream) {
  const reader = receiveStream.getReader();
  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      break;
    }
    // value is a Uint8Array
    console.log(value);
  }
}

Rufen Sie anschlieend WebTransport.incomingUnidirectionalStreams auf, und erhalten Sie eine Referenz auf den Leser, der im ReadableStream verfgbar ist, den es zurckgibt. Verwenden Sie dann den Leser, um die Daten vom Server zu lesen. Jeder Abschnitt ist ein WebTransportReceiveStream, und wir verwenden das zuvor eingerichtete readFrom(), um sie zu lesen:

async function receiveUnidirectional() {
  const uds = transport.incomingUnidirectionalStreams;
  const reader = uds.getReader();
  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      break;
    }
    // value is an instance of WebTransportReceiveStream
    await readData(value);
  }
}

Bidirektionale bertragung

Um einen bidirektionalen Stream von einem User-Agent zu ffnen, verwenden Sie die Methode WebTransport.createBidirectionalStream(), um eine Referenz auf einen WebTransportBidirectionalStream zu erhalten. Dieser enthlt readable- und writable-Eigenschaften, die Referenzen auf WebTransportReceiveStream- und WebTransportSendStream-Instanzen zurckgeben, die verwendet werden knnen, um vom Server zu lesen und darauf zu schreiben.

async function setUpBidirectional() {
  const stream = await transport.createBidirectionalStream();
  // stream is a WebTransportBidirectionalStream
  // stream.readable is a WebTransportReceiveStream
  const readable = stream.readable;
  // stream.writable is a WebTransportSendStream
  const writable = stream.writable;

  // 
}

Das Lesen vom WebTransportReceiveStream kann dann wie folgt erfolgen:

async function readData(readable) {
  const reader = readable.getReader();
  while (true) {
    const { value, done } = await reader.read();
    if (done) {
      break;
    }
    // value is a Uint8Array.
    console.log(value);
  }
}

Und das Schreiben zum WebTransportSendStream kann wie folgt geschehen:

async function writeData(writable) {
  const writer = writable.getWriter();
  const data1 = new Uint8Array([65, 66, 67]);
  const data2 = new Uint8Array([68, 69, 70]);
  writer.write(data1);
  writer.write(data2);
}

Wenn der Server einen bidirektionalen Stream ffnet, um Daten zu senden und vom Client zu empfangen, kann dieser ber die Eigenschaft WebTransport.incomingBidirectionalStreams zugegriffen werden, die einen ReadableStream von WebTransportBidirectionalStream-Objekten zurckgibt. Jedes kann verwendet werden, um Uint8Array-Instanzen wie oben gezeigt zu lesen und zu schreiben. Wie beim unidirektionalen Beispiel bentigen Sie jedoch eine erste Funktion, um den bidirektionalen Stream zu lesen:

async function receiveBidirectional() {
  const bds = transport.incomingBidirectionalStreams;
  const reader = bds.getReader();
  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      break;
    }
    // value is an instance of WebTransportBidirectionalStream
    await readData(value.readable);
    await writeData(value.writable);
  }
}

Schnittstellen

WebTransport

Bietet Funktionalitten, um einem User-Agent zu erlauben, sich mit einem HTTP/3-Server zu verbinden, sowohl zuverlssigen als auch unzuverlssigen Transport in eine oder beide Richtungen zu initiieren und die Verbindung zu schlieen, sobald sie nicht mehr bentigt wird.

WebTransportBidirectionalStream

Reprsentiert einen bidirektionalen Stream, der von einem Server oder Client erstellt wurde und fr zuverlssigen Transport verwendet werden kann. Bietet Zugang zu einem ReadableStream zum Lesen eingehender Daten und einem WritableStream zum Schreiben ausgehender Daten.

WebTransportDatagramDuplexStream

Reprsentiert einen Duplex-Stream, der fr den unzuverlssigen Transport von Datagrammen zwischen Client und Server verwendet werden kann. Bietet Zugang zu einem ReadableStream zum Lesen eingehender Datagramme, einem WritableStream zum Schreiben ausgehender Datagramme, und verschiedenen Einstellungen und Statistiken in Bezug auf den Stream.

WebTransportError

Stellt einen Fehler in Bezug auf die WebTransport API dar, der durch Serverfehler, Netzwerkverbindungsprobleme oder vom Client ausgelste Abbruchvorgnge (z. B. durch einen Aufruf von WritableStream.abort()) entstehen kann.

WebTransportReceiveStream

Bietet Streaming-Funktionen fr einen eingehenden WebTransport unidirektionalen oder bidirektionalen WebTransport Stream.

WebTransportSendStream

Bietet Streaming-Funktionen fr einen ausgehenden WebTransport unidirektionalen oder bidirektionalen WebTransport Stream.

Beispiele

Fr vollstndige Beispiele, siehe:

• WebTransport ber HTTP/3 Client

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Verwendung von WebTransport
• WebSockets API
• Streams API
• WebTransport ber HTTP/3