Streams Web partout (et récupérer pour Node.js)

La prédiction de Jake Archibald 2016 de "l'année des flux Web" aurait pu être légèrement en avance sur son temps. Cependant, la norme des flux, initialement proposée en 2014, est désormais une réalité, mise en œuvre de manière cohérente à travers les navigateurs modernes (avec Firefox rattrapage) et Node.js (et Deno).

Comprendre les flux

Le streaming gère efficacement de grandes ressources de données en les divisant en "morceaux" plus petits et en les traitant séquentiellement. Cela évite d'attendre un téléchargement complet avant le début du traitement, permettant une gestion progressive des données.

Trois types de flux principaux existent: lisibles, écrivables et transformes. Les flux lisibles fournissent des morceaux de données (à partir de sources comme des fichiers ou des connexions HTTP). Transform Streams (Facultatif) Modifiez ces morceaux. Enfin, les flux scénarisables reçoivent les données traitées.

Streams Web: cohérence multiplateforme

Node.js avait initialement sa propre implémentation de flux, souvent considérée comme complexe. La norme Web de WhatWG pour les flux offre une amélioration significative, maintenant appelée «flux Web» dans la documentation Node.js. Bien que les flux Node.js d'origine restent, l'API standard Web coexiste, promouvant le code multiplateforme et simplifiant le développement.

Deno, également créé par l'auteur original de Node.js, prend en charge entièrement les flux Web, les API de navigateur en miroir. Les travailleurs de Cloudflare et le déploiement de Deno exploitent également cette approche standardisée.

fetch() et les flux lisibles

La façon la plus courante de créer un flux lisible consiste à utiliser fetch() . La response.body d'un appel fetch() est un flux lisible.

 fetch ('data.txt')
.Then (réponse => console.log (réponse.body));

Le journal de la console révèle plusieurs méthodes de flux utiles. Comme l'indique la spécification, un flux lisible peut être directement tué vers un flux écrite à l'aide pipeTo() , ou tuyaux via des flux de transformation à l'aide de pipeThrough() .

Node.js Core manque de support fetch intégré. node-fetch (une bibliothèque populaire) renvoie un flux de nœuds, pas un flux Whatwg. Undici , un nouveau client HTTP / 1.1 de l'équipe Node.js, propose une alternative moderne à http.request , fournissant une implémentation fetch où response.body renvoie un flux Web. Undici est susceptible de devenir le gestionnaire de demande HTTP recommandé dans Node.js. Une fois installé ( npm install undici ), il fonctionne de manière similaire à fetch du navigateur. L'exemple suivant tue un flux à travers un flux de transformation:

 import {fetch} de 'undici';
import {textdecoderstream} à partir de 'node: stream / web';

fonction async fetchstream () {
  const Response = attendre fetch ('https://example.com');
  const stream = réponse.body;
  const textStream = stream.pipeThrough (new TextDecOdersTream ());
  // ... Traitement supplémentaire de TextStream ...
}

response.body est synchrone; await n'est pas nécessaire. Le code du navigateur est presque identique, omettant les instructions import car fetch et TextDecoderStream sont disponibles à l'échelle mondiale. Deno a également un soutien natif.

Itération asynchrone

La boucle for-await-of fournit une itération asynchrone, étendant la fonctionnalité for-of boucle pour les itérables asynchrones (comme les flux et les tableaux de promesses).

 Fonction asynchrone FetchandLogStream () {
  const Response = attendre fetch ('https://example.com');
  const stream = réponse.body;
  const textStream = stream.pipeThrough (new TextDecOdersTream ());

  Pour Await (const Cons de TextStream) {
    console.log (morceau);
  }
}

fetchandLogStream ();

Cela fonctionne dans Node.js, Deno et les navigateurs modernes (bien que le support de flux de navigateur soit toujours en développement).

Sources de flux lisibles supplémentaires

Bien que fetch() soit répandu, d'autres méthodes créent des flux lisibles: Blob.stream() et File.stream() (nécessitant import { Blob } from 'buffer'; dans node.js). Dans les navigateurs, un<input type="file"> L'élément fournit facilement un flux de fichiers:

 const FileStream = document.QuerySelector ('entrée'). Files [0] .Stream ();

Node.js 17 introduit FileHandle.readableWebStream() de fs/promises.open() :

 import {open} depuis 'node: fs / promises';

// ... (Open File and Process Stream) ...

Intégration de flux et de promesse

Pour les actions d'achèvement après la circulation, les promesses sont utiles:

 SomeReraBableStream
.pipeto (SomewritableStream)
.Then (() => console.log ("Données écrites"))
.Catch (error => console.error ("erreur", erreur));

Ou en utilisant await :

 attendre someReadableStream.pipeto (SomewritableStream);

Création de flux de transformation personnalisée

Au-delà de TextDecoderStream (et TextEncoderStream ), vous pouvez créer des flux de transformation personnalisés à l'aide de TransformStream . Le constructeur accepte un objet avec des méthodes start , transform et flush facultatives. transform effectue la transformation des données.

Voici un décodeur de texte simplifié (à des fins d'illustration; Utilisez TextDecoderStream en production):

 const decoder = new textdecoder ();
const decodestream = new transformStream ({{
  transform (Chunk, contrôleur) {
    contrôleur.enqueue (decoder.decode (chunk, {stream: true}));
  }
});

De même, vous pouvez créer des flux lisibles personnalisés à l'aide ReadableStream , en fournissant des fonctions start , pull et cancel . La fonction start utilise controller.enqueue pour ajouter des morceaux.

Interopérabilité du flux de nœuds

Node.js fournit des méthodes .fromWeb() et .toWeb() (dans Node.js 17) pour la conversion entre les flux de nœuds et les flux Web.

Conclusion

La convergence des API Browser et Node.js continue, les flux étant un élément clé de cette unification. Bien que l'adoption complète du flux frontal soit toujours en cours (par exemple, MediaStream n'est pas encore un flux lisible), le futur indique une utilisation plus large du flux. Le potentiel d'E / S efficace et de développement multiplateforme rend l'apprentissage des flux Web en valeurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!