Streams API

Streaming beinhaltet das Aufteilen einer Ressource, die über ein Netzwerk empfangen werden soll, in kleine Stücke und das schrittweise Verarbeiten. Browser tun dies bereits beim Empfang von Medieninhalten – Videos werden gepuffert und abgespielt, während mehr Inhalt heruntergeladen wird, und manchmal werden Bilder schrittweise angezeigt, wenn mehr geladen wird.

Diese Fähigkeit war jedoch nie zuvor für JavaScript verfügbar. Bisher mussten wir, wenn wir eine Ressource irgendeiner Art (Video, Textdatei usw.) verarbeiten wollten, die gesamte Datei herunterladen, warten, bis sie in ein geeignetes Format deserialisiert wurde, und dann alle Daten verarbeiten.

Mit der Streams-API können Sie rohe Daten mit JavaScript Schritt für Schritt verarbeiten, sobald sie verfügbar sind, ohne dass ein Puffer, String oder Blob erstellt werden muss.

Weitere Vorteile sind, dass Sie erkennen können, wann Streams beginnen oder enden, Streams miteinander verketten, Fehler behandeln und Streams bei Bedarf abbrechen sowie auf die Geschwindigkeit reagieren können, mit der der Stream gelesen wird.

Die Nutzung von Streams beruht darauf, Antworten als Streams verfügbar zu machen. Zum Beispiel ist der Antwortkörper, der von einer erfolgreichen Fetch-Anfrage zurückgegeben wird, ein ReadableStream, der von einem mit ReadableStream.getReader() erstellten Leser gelesen werden kann.

Komplexere Anwendungen umfassen die Erstellung eines eigenen Streams mit dem ReadableStream()-Konstruktor, um beispielsweise Daten innerhalb eines Service Workers zu verarbeiten.

Sie können auch Daten in Streams mit WritableStream schreiben.

ReadableStream

Repräsentiert einen lesbaren Datenstrom. Er kann verwendet werden, um Antwortströme der Fetch-API oder vom Entwickler definierte Streams (z.B. ein benutzerdefinierter ReadableStream()-Konstruktor zu behandeln).

ReadableStreamDefaultReader

Repräsentiert einen Standardleser, der verwendet werden kann, um aus dem Netzwerk bereitgestellte Streamdaten zu lesen (z.B. eine Fetch-Anfrage).

ReadableStreamDefaultController

Repräsentiert einen Controller, der die Steuerung des Zustands und der internen Warteschlange eines ReadableStream ermöglicht. Standardcontroller sind für Streams, die keine Byte-Streams sind.

WritableStream

Bietet eine Standardabstraktion zum Schreiben von Streaming-Daten an ein Ziel, bekannt als "sink". Dieses Objekt bringt integrierten Gegendruck und Warteschlangen mit.

WritableStreamDefaultWriter

Repräsentiert einen Standardautor für beschreibbare Streams, der verwendet werden kann, um Datenblöcke in einen beschreibbaren Stream zu schreiben.

WritableStreamDefaultController

Repräsentiert einen Controller, der die Steuerung des Zustands eines WritableStream ermöglicht. Beim Erstellen eines WritableStream wird das zugrunde liegende "sink" mit einer entsprechenden WritableStreamDefaultController-Instanz zum Manipulieren ausgestattet.

TransformStream

Repräsentiert eine Abstraktion für ein Stream-Objekt, das Daten transformiert, während es durch eine Pipeline-Kette von Stream-Objekten fließt.

TransformStreamDefaultController

Bietet Methoden zur Manipulation des mit einem Transform-Stream verbundenen ReadableStream und WritableStream.

ByteLengthQueuingStrategy

Bietet eine integrierte Byte-Längen-Warteschlangenstrategie, die beim Erstellen von Streams verwendet werden kann.

CountQueuingStrategy

Bietet eine integrierte Strategie zum Zählen von Datenblöcken, die beim Erstellen von Streams verwendet werden kann.

Request

Wenn ein neues Request-Objekt erstellt wird, können Sie ihm einen ReadableStream in der body-Eigenschaft seines RequestInit-Dictionaries übergeben. Diese Request könnte dann an einen fetch() übergeben werden, um das Streamen zu beginnen.

Response.body

Der Antwortkörper, der von einer erfolgreichen Fetch-Anfrage zurückgegeben wird, wird standardmäßig als ReadableStream bereitgestellt und kann mit einem Leser verbunden werden usw.

ReadableStreamBYOBReader

Repräsentiert einen BYOB ("bring your own buffer")-Leser, der verwendet werden kann, um vom Entwickler bereitgestellte Streamdaten zu lesen (z.B. ein benutzerdefinierter ReadableStream()-Konstruktor).

ReadableByteStreamController

Repräsentiert einen Controller, der die Steuerung des Zustands und der internen Warteschlange eines ReadableStream ermöglicht. Byte-Stream-Controller sind für Byte-Streams.

ReadableStreamBYOBRequest

Repräsentiert eine Aufforderung zum Einziehen in einem ReadableByteStreamController.

Wir haben ein Verzeichnis mit Beispielen erstellt, das mit der Streams-API-Dokumentation einhergeht – siehe mdn/dom-examples/streams. Die Beispiele sind wie folgt:

• [Einfacher Stream-Pump]((https://mdn.github.io/dom-examples/streams/simple-pump/): Dieses Beispiel zeigt, wie ein ReadableStream konsumiert und seine Daten an einen anderen weitergegeben werden.
• Ein PNG in Graustufen konvertieren: Dieses Beispiel zeigt, wie ein ReadableStream eines PNG in Graustufen umgewandelt werden kann.
• Einfacher Zufalls-Stream: Dieses Beispiel zeigt, wie ein benutzerdefinierter Stream genutzt wird, um zufällige Zeichenketten zu erzeugen, sie als Blöcke in die Warteschlange zu stellen und dann wieder auszulesen.
• Einfaches Tee-Beispiel: Dieses Beispiel erweitert das Simple random stream-Beispiel und zeigt, wie ein Stream geteilt werden kann und beide resultierenden Streams unabhängig voneinander gelesen werden können.
• Einfacher Writer: Dieses Beispiel zeigt, wie man in einen beschreibbaren Stream schreibt, dann den Stream dekodiert und den Inhalt in die Benutzeroberfläche schreibt.
• Blöcke eines PNG-Datei entpacken: Dieses Beispiel zeigt, wie pipeThrough() verwendet werden kann, um einen ReadableStream in einen Stream anderer Datentypen zu transformieren, indem Daten einer PNG-Datei in einen Stream von PNG-Blöcken umgewandelt werden.

Beispiele von anderen Entwicklern:

• Prozessindikatoren mit Streams, Service-Workern und Fetch.

• Streams-API-Konzepte
• Lesbare Streams verwenden
• Lesbare Byte-Streams verwenden
• Beschreibbare Streams verwenden