Heim > Web-Frontend > CSS-Tutorial > Web -Streams überall (und holen Sie sich für node.js)

Web -Streams überall (und holen Sie sich für node.js)

Jennifer Aniston
Freigeben: 2025-03-19 10:01:08
Original
871 Leute haben es durchsucht

Web -Streams überall (und holen Sie Node.js)

Jake Archibalds Vorhersage von "The Year of Web Streams" könnte seiner Zeit geringfügig voraus waren. Der ursprünglich 2014 vorgeschlagene Streams -Standard ist jedoch Realität und wird in modernen Browsern (mit Firefox -Aufholungen) und Node.js (und Deno) konsequent implementiert.

Streams verstehen

Streaming effizient behandelt große Datenressourcen, indem sie in kleinere "Stücke" zerlegt und nacheinander verarbeitet werden. Dies wird vermieden, dass ein vollständiger Download vor Beginn der Verarbeitung warten wird, um progressive Datenbehandlungen zu ermöglichen.

Es gibt drei Hauptstromtypen: lesbare, beschreibbare und transformierbare Streams. Lesbare Streams liefern Datenbrocken (aus Quellen wie Dateien oder HTTP -Verbindungen). Transformation Streams (optional) Ändern Sie diese Stücke. Schließlich erhalten beschreibbare Streams die verarbeiteten Daten.

Webströme: plattformübergreifende Konsistenz

Node.js hatte zunächst eine eigene Stream -Implementierung, die oft als komplex angesehen wird. Der Whatwg Web Standard für Streams bietet eine erhebliche Verbesserung, die jetzt in der Dokumentation von Node.js als "Web -Streams" bezeichnet wird. Während die ursprünglichen Node.js-Streams bestehen bleiben, koexistiert die Web-Standard-API, die plattformübergreifende Code fördert und die Entwicklung vereinfacht.

Deno, der auch vom ursprünglichen Autor von Node.js erstellt wurde, unterstützt Web -Streams vollständig und spiegelt Browser -APIs. CloudFlare -Mitarbeiter und Deno -Deployming nutzen diesen standardisierten Ansatz auch.

fetch() und lesbare Streams

Der häufigste Weg, um einen lesbaren Strom zu erstellen, ist fetch() . Die response.body of a fetch() Call ist ein lesbarer Stream.

 Fetch ('Data.txt')
.then (response => console.log (Antwort.body));
Nach dem Login kopieren

Das Konsolenprotokoll enthält mehrere nützliche Stream -Methoden. Wie in der Spezifikation kann ein lesbarer Strom mit pipeTo() direkt in einen beschreibbaren Strom überleitet oder mit pipeThrough() durch Transformationsströme geführt werden.

Node.js Core fehlt ein integrierter fetch . node-fetch (eine beliebte Bibliothek) gibt einen Knotenstrom zurück, nicht einen WhatWg-Stream. Undici , ein neuerer HTTP/1.1 -Client des Node.js -Teams, bietet eine moderne Alternative zu http.request und bietet eine fetch , bei der response.body Körper gibt einen Web -Stream zurück. Undici wird wahrscheinlich der empfohlene HTTP -Anfrage -Handler in Node.js. Nach der Installation ( npm install undici ) funktioniert es ähnlich wie der Browser fetch . Das folgende Beispiel leitet einen Strom durch einen Transformationsstrom:

 import {fetch} aus 'undici';
importieren {textDecerStream} aus 'Knoten: Stream/Web';

asynchrische Funktion FetchStream () {
  const response = warte fetch ('https://example.com');
  const stream = response.body;
  const textstream = stream.pipethrough (neuer Textdecoderstream ());
  // ... Weitere Verarbeitung von Textstream ...
}
Nach dem Login kopieren

response.body ist synchron; await ist nicht benötigt. Der Browsercode ist fast identisch und lässt die import aus, da fetch und TextDecoderStream weltweit verfügbar sind. Deno hat auch einheimische Unterstützung.

Asynchrone Iteration

Die for-await-of Schleifen asynchrone Iteration liefert die Funktionalität des for-of Loops auf asynchrone Iterelungen (wie Streams und Arrays von Versprechen).

 asynchrische Funktion FetchandLogstream () {
  const response = warte fetch ('https://example.com');
  const stream = response.body;
  const textstream = stream.pipethrough (neuer Textdecoderstream ());

  für auf warting (const Chunk of textstream) {
    console.log (Chunk);
  }
}

fetchandLogstream ();
Nach dem Login kopieren

Dies funktioniert in Node.js, Deno und modernen Browsern (obwohl sich immer noch der Browserstromunterstützung entwickelt).

Zusätzliche lesbare Stream -Quellen

Während fetch() weit verbreitet ist, erstellen andere Methoden lesbare Streams: Blob.stream() und File.stream() (für import { Blob } from 'buffer'; in node.js). In Browsern, an<input type="file"> Das Element bietet problemlos einen Dateistrom:

 const fileStream = document.querySelector ('Eingabe'). Dateien [0] .stream ();
Nach dem Login kopieren

Node.js 17 führt FileHandle.readableWebStream() aus fs/promises.open() :

 import {open} aus 'Knoten: fs/Versprechen';

// ... (Öffnen Sie den Datei- und Prozessstrom) ...
Nach dem Login kopieren

Stream- und Versprechen -Integration

Für Maßnahmen nach dem Stream sind Versprechen nützlich:

 Somereadablestream
.pipeto (smwritablestream)
.then (() => console.log ("Daten geschrieben"))
.Catch (error => console.Error ("Fehler", error));
Nach dem Login kopieren

Oder await Sie darauf:

 erwarten Sie somereadablestream.pipeto (smWritablStream);
Nach dem Login kopieren

Benutzerdefinierte Transformationsstromerstellung

Über TextDecoderStream (und TextEncoderStream ) hinaus können Sie mit TransformStream benutzerdefinierte Transformationsströme erstellen. Der Konstruktor akzeptiert ein Objekt mit optionalen start , transform und flush -Methoden. transform führt die Datentransformation durch.

Hier finden Sie einen vereinfachten (zum veranschaulichenden Zweck; verwenden Sie TextDecoderStream in der Produktion) Textdecoder:

 const decoder = new textDecoder ();
const decoDestream = neuer TransformStream ({{
  Transformation (Chunk, Controller) {
    Controller.Enqueue (decoder.decode (Chunk, {Stream: true}));
  }
});
Nach dem Login kopieren

In ähnlicher Weise können Sie benutzerdefinierte lesbare Streams mit ReadableStream erstellen, um Funktionen zu start , pull und cancel . Die start verwendet controller.enqueue , um Stücke hinzuzufügen.

Knotenstrom Interoperabilität

Node.js bietet .fromWeb() und .toWeb() Methoden (in Node.js 17) zum Konvertieren zwischen Knotenströmen und Webströmen.

Abschluss

Die Konvergenz von Browser und Node.js -APIs setzt sich fort, wobei Streams ein wichtiger Teil dieser Vereinigung sind. Während die vollständige Adoption für Front-End-Stream noch im Gange ist (z. B. MediaStream ist noch kein lesbarer Strom), weist die zukünftige Stream-Nutzung hin. Das Potenzial für eine effiziente Entwicklung von E/A und plattformübergreifend macht das Lernen von Web-Streams lohnenswert.

Das obige ist der detaillierte Inhalt vonWeb -Streams überall (und holen Sie sich für node.js). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage