Streams API

Streaming beinhaltet das Zerlegen einer Ressource, die über ein Netzwerk empfangen werden soll, in kleine Teile und das anschließende Verarbeiten Stück für Stück. Browser tun dies bereits beim Empfangen von Medienressourcen — Videos puffern und spielen, während mehr Inhalte heruntergeladen werden, und manchmal sieht man Bilder, die allmählich angezeigt werden, während mehr geladen wird.

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

Mit der Streams API können Sie mit JavaScript Rohdaten Stück für Stück verarbeiten, sobald sie verfügbar sind, ohne einen Puffer, eine Zeichenkette oder ein Blob erzeugen zu müssen.

Es gibt noch weitere Vorteile — Sie können erkennen, wann Streams starten oder enden, Streams verketten, Fehler behandeln und Streams nach Bedarf abbrechen sowie auf die Geschwindigkeit reagieren, mit der der Stream gelesen wird.

Die Verwendung von Streams basiert darauf, Antworten als Streams verfügbar zu machen. Beispielsweise ist der Antwortkörper, der bei einer erfolgreichen fetch-Anfrage zurückgegeben wird, ein ReadableStream, der von einem Leser gelesen werden kann, der mit ReadableStream.getReader() erstellt wird.

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

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

ReadableStream

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

ReadableStreamDefaultReader

Repräsentiert einen Standardleser, der verwendet werden kann, um aus einem über das Netzwerk bereitgestellten Datenstrom zu lesen (z.B. eine fetch-Anfrage).

ReadableStreamDefaultController

Repräsentiert einen Controller, der es ermöglicht, den Status und die interne Warteschlange eines ReadableStream zu steuern. Standardcontroller sind für Streams, die keine Bytestreams sind.

WritableStream

Bietet eine Standardabstraktion für das Beschreiben von Datenströmen zu einem Ziel, das als Senke bekannt ist. Dieses Objekt verfügt über integrierte Gegenstromkontrolle und Warteschlangen.

WritableStreamDefaultWriter

Repräsentiert einen Standard-Schreibstream-Schreiber, der verwendet werden kann, um Datenstücke in einen beschreibbaren Stream zu schreiben.

WritableStreamDefaultController

Repräsentiert einen Controller, der es ermöglicht, den Status eines WritableStream zu steuern. Beim Konstruieren eines WritableStream wird der zugrunde liegenden Senke eine entsprechende WritableStreamDefaultController-Instanz zur Manipulation gegeben.

TransformStream

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

TransformStreamDefaultController

Bietet Methoden zur Manipulation des ReadableStream und WritableStream, die mit einem Transformstream verknüpft sind.

ByteLengthQueuingStrategy

Bietet eine eingebaute Bytelängenschlangen-Strategie, die beim Konstruieren von Streams verwendet werden kann.

CountQueuingStrategy

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

Request

Wenn ein neues Request-Objekt konstruiert wird, kann man ihm über die body-Eigenschaft seines RequestInit-Dictionaries einen ReadableStream übergeben. Diese Request kann dann an ein fetch() übergeben werden, um das Abrufen des Streams zu beginnen.

Response.body

Der Antwortkörper, der bei einer erfolgreichen fetch-Anfrage zurückgegeben wird, wird standardmäßig als ReadableStream bereitgestellt und kann einen an ihn angehängten Leser haben, etc.

ReadableStreamBYOBReader

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

ReadableByteStreamController

Repräsentiert einen Controller, der es ermöglicht, den Status und die interne Warteschlange eines ReadableStream zu steuern. Bytestream-Controller sind für Bytestreams.

ReadableStreamBYOBRequest

Repräsentiert eine Aufforderung zum Ziehen in einen ReadableByteStreamController.

Wir haben ein Verzeichnis mit Beispielen zusammengestellt, um die Streams API-Dokumentation zu begleiten — siehe mdn/dom-examples/streams. Die Beispiele sind wie folgt:

• Einfacher Stream-Pump: Dieses Beispiel zeigt, wie ein ReadableStream verbraucht und seine Daten an einen anderen übergeben werden können.
• Ein PNG in Graustufen umwandeln: Dieses Beispiel zeigt, wie ein ReadableStream eines PNG in Graustufen umgewandelt werden kann.
• Einfacher Zufallsstrom: Dieses Beispiel zeigt, wie ein benutzerdefinierter Stream verwendet werden kann, um zufällige Zeichenfolgen zu generieren, sie als Datenstücke einzureihen und dann wieder auszulesen.
• Einfaches Tee-Beispiel: Dieses Beispiel erweitert das einfache Zufallsstrombeispiel und zeigt, wie ein Stream geteilt werden kann, sodass beide resultierenden Streams unabhängig gelesen werden können.
• Einfacher Schreiber: Dieses Beispiel zeigt, wie man in einen beschreibbaren Stream schreibt, dann den Stream dekodiert und die Inhalte an die Benutzeroberfläche schreibt.
• Pakete eines PNG 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-Paketen umgewandelt werden.

Beispiele von anderen Entwicklern:

• Fortschrittsanzeigen mit Streams, Service Workers und Fetch.

• Streams API-Konzepte
• Verwenden von lesebaren Streams
• Verwenden von lesebaren Byte-Streams
• Verwenden von beschreibbaren Streams