Die Streams-API ermöglicht es JavaScript, programmatisch auf Datenströme zuzugreifen, die über das Netzwerk empfangen werden, und sie nach den Wünschen des Entwicklers zu verarbeiten.

Konzepte und Nutzung

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 erfolgreichenFetch-Anfrage zurückgegeben wird, einReadableStream, der von einem mitReadableStream.getReader() erstellten Leser gelesen werden kann.

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

Sie können auch Daten in Streams mitWritableStream schreiben.

Stream-Schnittstellen

Lesbare Streams

ReadableStream

Repräsentiert einen lesbaren Datenstrom. Er kann verwendet werden, um Antwortströme derFetch-API oder vom Entwickler definierte Streams (z.B. ein benutzerdefinierterReadableStream()-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 einesReadableStream ermöglicht. Standardcontroller sind für Streams, die keine Byte-Streams sind.

Beschreibbare Streams

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 einesWritableStream ermöglicht. Beim Erstellen einesWritableStream wird das zugrunde liegende "sink" mit einer entsprechendenWritableStreamDefaultController-Instanz zum Manipulieren ausgestattet.

Transform-Streams

TransformStream

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

TransformStreamDefaultController

Bietet Methoden zur Manipulation des mit einem Transform-Stream verbundenenReadableStream undWritableStream.

Verwandte Stream-APIs und Operationen

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.

Erweiterungen zu anderen APIs

Request

Wenn ein neuesRequest-Objekt erstellt wird, können Sie ihm einenReadableStream in derbody-Eigenschaft seinesRequestInit-Dictionaries übergeben. DieseRequest könnte dann an einenfetch() übergeben werden, um das Streamen zu beginnen.

Response.body

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

Byte-Stream-verwandte Schnittstellen

ReadableStreamBYOBReader

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

ReadableByteStreamController

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

ReadableStreamBYOBRequest

Repräsentiert eine Aufforderung zum Einziehen in einemReadableByteStreamController.

Beispiele

Wir haben ein Verzeichnis mit Beispielen erstellt, das mit der Streams-API-Dokumentation einhergeht – siehemdn/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, wiepipeThrough() 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.

Spezifikationen

Browser-Kompatibilität

api.ReadableStream

api.WritableStream

Siehe auch

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