Streams API

Konzepte und Verwendung

Streaming beinhaltet das Aufteilen einer Ressource, die über ein Netzwerk empfangen werden soll, in kleine Teile und deren schrittweise Verarbeitung. Browser tun dies bereits beim Empfang von Medieninhalten – Videos puffern und spielen ab, während mehr Inhalte heruntergeladen werden, und manchmal sieht man, wie Bilder nach und nach angezeigt werden, während mehr geladen wird.

Diese Fähigkeit war JavaScript bisher jedoch nicht zugänglich. Bisher mussten wir, wenn wir eine Ressource jeglicher Art (Video, Textdatei etc.) 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 mit JavaScript sofort mit der Verarbeitung von Rohdaten beginnen, sobald diese verfügbar sind, ohne einen Puffer, String oder Blob erzeugen zu müssen.

Es gibt noch mehr Vorteile: Sie können erkennen, wann Streams beginnen oder enden, Streams miteinander verketten, Fehler behandeln und Streams bei Bedarf abbrechen und auf die Geschwindigkeit reagieren, mit der der Stream gelesen wird.

Die Verwendung 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 betreffen das Erstellen eines eigenen Streams mit dem ReadableStream()-Konstruktor, zum Beispiel zur Datenverarbeitung innerhalb eines Service Workers.

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

Stream-Schnittstellen

Lesbare Streams

ReadableStream

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

ReadableStreamDefaultReader

Stellt einen Standardleser dar, der verwendet werden kann, um Daten aus einem Netzwerkstrom (z.B. einer Fetch-Anfrage) zu lesen.

ReadableStreamDefaultController

Stellt einen Controller dar, der Kontrolle über den Zustand und die interne Warteschlange eines ReadableStream ermöglicht. Standard-Controller sind für Streams, die keine Bytestreams sind.

Schreibbare Streams

WritableStream

Bietet eine standardmäßige Abstraktion zum Schreiben von Streaming-Daten in ein Ziel, bekannt als „Sink“. Dieses Objekt verfügt über integrierten Gegendruck und Warteschlangen.

WritableStreamDefaultWriter

Stellt einen Standard-Schreibstream-Schreiber dar, der verwendet werden kann, um Datenstücke in einen schreibbaren Stream zu schreiben.

WritableStreamDefaultController

Stellt einen Controller dar, der Kontrolle über den Zustand eines WritableStream ermöglicht. Beim Konstruktor eines WritableStream wird dem zugrunde liegenden Sink eine entsprechende WritableStreamDefaultController-Instanz zugewiesen, um diese zu manipulieren.

Transform-Streams

TransformStream

Stellt eine Abstraktion für ein Stream-Objekt dar, das Daten transformiert, während es durch eine Pipe-Kette von Stream-Objekten geht.

TransformStreamDefaultController

Bietet Methoden zur Manipulation der mit einem Transform-Stream assoziierten ReadableStream und WritableStream.

Verwandte Stream-APIs und -Operationen

ByteLengthQueuingStrategy

Bietet eine eingebaute Byte-Länge-Wartestrategie, die beim Erstellen von Streams verwendet werden kann.

CountQueuingStrategy

Bietet eine eingebaute Stückzählungs-Wartestrategie, die beim Erstellen von Streams verwendet werden kann.

Erweiterungen zu anderen APIs

Request

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

Response.body

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

Bytestream-bezogene Schnittstellen

ReadableStreamBYOBReader

Stellt einen BYOB („Bring your own buffer“) Leser dar, der verwendet werden kann, um vom Entwickler bereitgestellte Stream-Daten zu lesen (z.B. ein benutzerdefinierter ReadableStream()-Konstruktor).

ReadableByteStreamController

Stellt einen Controller dar, der Kontrolle über den Zustand und die interne Warteschlange eines ReadableStream ermöglicht. Bytestream-Controller sind für Bytestreams.

ReadableStreamBYOBRequest

Stellt eine Anforderung zum Hineinziehen in einen ReadableByteStreamController dar.

Beispiele

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

• Einfacher Stream-Pumpe: Dieses Beispiel zeigt, wie man einen ReadableStream konsumiert und seine Daten an einen anderen übergibt.
• Ein PNG in Graustufen umwandeln: Dieses Beispiel zeigt, wie ein ReadableStream eines PNGs in Graustufen umgewandelt werden kann.
• Einfacher Zufalls-Stream: Dieses Beispiel zeigt, wie man einen benutzerdefinierten Stream verwendet, um zufällige Zeichenfolgen zu erzeugen, sie als Stücke einzureihen und sie dann wieder auszulesen.
• Einfaches Tee-Beispiel: Dieses Beispiel erweitert das Beispiel „Einfacher Zufalls-Stream“ und zeigt, wie ein Stream angezapft werden kann und beide resultierenden Streams unabhängig gelesen werden können.
• Einfacher Schreiber: Dieses Beispiel zeigt, wie man in einen schreibbaren Stream schreibt, dann den Stream dekodiert und die Inhalte in die Benutzeroberfläche schreibt.
• Stücke eines PNGs entpacken: Dieses Beispiel zeigt, wie pipeThrough() verwendet werden kann, um einen ReadableStream in einen Stream anderer Datentypen umzuwandeln, indem die Daten einer PNG-Datei in einen Stream von PNG-Stücken umgewandelt werden.

Spezifikationen

Browser-Kompatibilität

api.ReadableStream

api.WritableStream

Siehe auch

• Streams-API Konzepte
• Verwendung lesbarer Streams
• Verwendung lesbarer Bytestreams
• Verwendung schreibbarer Streams