L'API Streams permet à JavaScript d'accèder par programmation aux flux de données reçus sur le réseau et de les traiter selon les souhaits du développeur.

Concepts et utilisation

Le Streaming implique de segmenter une ressource que vous souhaitez recevoir sur le réseau et de la séparer en plus petits morceaux, puis de la traiter petit à petit. C'est une chose que font les navigateurs quand ils reçoivent des ressources pour les afficher sur les pages web — le buffer d'une vidéo est progressivement disponible à la lecture, tout comme parfois vous verrez des images s'afficher progressivement durant leur chargement.

Mais ceci n'a jamais été possible pour le javascript par le passé. Avant, si nous souhaitions traiter une ressource quel qu'en soit le type (qu'il s'agisse d'une vidéo, ou d'un fichier texte, etc.), il nous fallait télécharger le fichier en entier, attendre qu'il soit désérialisé en un format acceptable, pour alors traiter la totalité après l'avoir totalement reçu.

Avec la mise à disposition des Streams en JavaScript, tout ceci a changé — vous pouvez maintenant commencer à traiter des données brutes petit à petit avec du Javascript dès qu'elles sont disponibles coté client, sans avoir besoin de générer unbuffer,string, oublob.

Il y a aussi d'autres avantages — vous pouvez détecter quand un flux commence ou prend fin, chaîner les flux entre eux, traiter les erreurs et annuler les flux si nécessaire et vous adapter à la vitesse de lecture du flux.

L'usage basique desStreams s'articule autour de la mise à disposition des réponses sous forme de flux. Par exemple, le corps de réponse retourné par unerequêtefetch réussie peut être exposé en tant queReadableStream — vous pourrez ainsi le lire en utilisant un lecteur créé parReadableStream.getReader(), l'annuler avecReadableStream.cancel(), etc.

Un usage plus avancé consiste à créer son propre flux en utilisant le constructeurReadableStream(), pour traiter par exemple les données à l'intérieur d'unservice worker.

Vous pouvez aussi écrire des données vers les flux en utilisantWritableStream.

Stream interfaces

Readable streams

ReadableStream

Correspond à un flux de données lisible. Il peut être utlisé afin de gérer les réponses des flux de l'API Fetch, ou des flux définis par le développeur (cad. un constructeurReadableStream() personnalisé).

ReadableStreamDefaultReader

Correspond à un lecteur par défaut pouvant être utilisé afin de lire un flux de données fourni par le réseau (cad. une requête fetch).

ReadableStreamDefaultController

Correspond à un controlleur permettant de gérer l'état d'unReadableStream et le système de queue interne. Les controleurs par défaut sont à destination des flux qui ne sont pas des flux d'octets.

Writable streams

WritableStream

Propose un standard d'abstraction afin d'écrire des flux de données vers une destination, ce qu'on appel un sink (unaggregateur de flux). Cet objet s'accompagne d'un built-in backpressure et d'un système de queue.

WritableStreamDefaultWriter

Correspond à un flux inscriptible par défaut pouvant être utilisé afin d'écire des chunks (plus petit morceaux) de données vers un flux inscriptible.

WritableStreamDefaultController

Correspond à un controlleur permettant de gérer l'état d'unWritableStream. Lors de la construction d'unWritableStream, le sink sous-jacent se voit attribuer une instance deWritableStreamDefaultController afin de pouvoir le manipuler.

Related stream APIs and operations

ByteLengthQueuingStrategy

Fournit une stratégie intégrée de file d'attente basée sur la taille en octets, pouvant être utilisée lors de la construction de flux..

CountQueuingStrategy

Fournit une stratégie intégrée de file d'attente basée sur le comptage des chunks, pouvant être utilisée lors de la construction de flux.

Extensions vers d'autres APIs

Request

Quand un nouvel objetRequest est construit, vous pouvez lui passer unReadableStream dans la propriétébody de son dictionnaireRequestInit. CetteRequest peut alors être envoyée à unfetch() pour initier l'appel vers le flux.

Body

La réponseBody retrouné par unappel fetch réussi est exposée par défaut comme unReadableStream, et peut être ratachée à un reader, etc.

Interfaces liées aux flux d'octets

ReadableStreamBYOBReader

Correspond à un lecteur BYOB ("bring your own buffer") pouvant être utilisé pour lire des flux de données fourni par le développeur (c.a.d. un constructeurReadableStream() personalisé).

ReadableByteStreamController

Correspond à un controlleur permettant de manipuler l'état et la file d'attente interne d'unReadableStream. Les controlleurs de flux d'octets sont à usage des flux d'octets.

ReadableStreamBYOBRequest

Correspond à unpull dans une requêteReadableByteStreamController.

Examples

We have created a directory of examples to go along with the Streams API documentation — seemdn/dom-examples/streams. The examples are as follows:

• Simple stream pump: This example shows how to consume a ReadableStream and pass its data to another.
• Grayscale a PNG: This example shows how a ReadableStream of a PNG can be turned into grayscale.
• Simple random stream: This example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again.
• Simple tee example: This example extends the Simple random stream example, showing how a stream can be teed and both resulting streams can be read independently.
• Simple writer: This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.
• Unpack chunks of a PNG: This example shows howpipeThrough() can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.

Examples from other developers:

• Progress Indicators with Streams, Service Workers, & Fetch.

Spécifications

Compatibilité des navigateurs

api.ReadableStream

api.WritableStream

Voir aussi

• Streams API concepts
• Using readable streams
• Using writable streams