JavaScript-lesbarer Stream

1. Installieren Sie ReadableStream in JavaScript
2. Beispiel für ReadableStream mit .getReader()
3. Beispiel für ReadableStream unter Verwendung der Fetch-API

Ein ReadableStream ist ein JavaScript-Objekt, mit dem Sie Daten aus einer Quelle streamartig lesen können. Es wird oft verwendet, um große Datenmengen wie eine Datei oder einen Netzwerkstream zu lesen, und kann in Verbindung mit anderen APIs wie der Fetch-API oder dem Response-Objekt im Browser verwendet werden.

Um einen ReadableStream zu erstellen, können Sie den Konstruktor new ReadableStream() verwenden, der eine Quelle und einige Optionen als Argumente entgegennimmt. Anschließend können Sie mit der Methode .getReader() des Streams ein reader-Objekt erhalten, mit dem Sie die Daten mit Methoden wie .read() und .cancel() aus dem Stream auslesen können.

Einer der Hauptvorteile der Verwendung eines ReadableStream besteht darin, dass Sie die Daten während des Lesens verarbeiten können, anstatt zu warten, bis der gesamte Stream vollständig geladen ist. Dies kann besonders nützlich sein, wenn Sie mit großen Datensätzen arbeiten oder Daten aus einer langsamen Quelle lesen.

Insgesamt ist der ReadableStream ein mächtiges Werkzeug für die Arbeit mit Streaming-Daten in JavaScript und kann eine sinnvolle Ergänzung Ihres Werkzeugkastens bei der Entwicklung von Webanwendungen sein.

Installieren Sie ReadableStream in JavaScript

Der Konstruktor ReadableStream ist kein Teil der JavaScript-Kern-API, aber es sind Bibliotheken verfügbar, die diese Funktionalität bereitstellen. Eine beliebte Bibliothek ist das Paket readable-stream.

Um das Paket readable-stream in Ihrem Node.js-Projekt zu verwenden, können Sie es mit npm installieren, indem Sie den folgenden Befehl ausführen:

npm install readable-stream

Dann können Sie in Ihrem Code die Klasse Readable importieren und damit ein neues ReadableStream-Objekt erstellen.

const {Readable} = require('readable-stream');

Beispiel für ReadableStream mit .getReader()

Hier ist ein Beispiel für das Erstellen eines ReadableStream und das Lesen von Daten mit der .getReader()-Methode.

In diesem Beispiel verwendet die start-Methode eine setTimeout-Funktion, um alle 100 Millisekunden asynchron neue Werte in den Stream zu pushen.

Dieser Code erstellt einen ReadableStream, der eine Reihe von Zahlen generiert, beginnend bei 0 und endend bei 99. Der Stream wird mit der start-Methode erstellt, die jedes Mal aufgerufen wird, wenn der Stream bereit ist, mit dem Lesen von Daten zu beginnen.

Die Methode .getReader() wird verwendet, um ein reader-Objekt zu erhalten, das dann in einer async-Funktion verwendet wird, um die Daten aus dem Stream zu lesen. Die Methode .read() wird wiederholt in einer Schleife aufgerufen, und die Schleife wird beendet, wenn die Eigenschaft done des zurückgegebenen Objekts true ist, was anzeigt, dass der Stream geschlossen wurde.

// const { Readable } = require("readable-stream");

const stream = new ReadableStream({
  start(controller) {
    let i = 0;
    function push() {
      controller.enqueue(i++);
      if (i < 100) {
        setTimeout(push, 100);
      } else {
        controller.close();
      }
    }
    push();
  },
});

const reader = stream.getReader();

(async function read() {
  while (true) {
    const {value, done} = await reader.read();
    if (done) {
      break;
    }
    console.log(value);
  }
})();

Ausgang:

Beispiel für ReadableStream unter Verwendung der Fetch-API

Hier ist ein weiteres Beispiel für die Verwendung eines ReadableStream, diesmal mit der Fetch-API, um Daten von einer Remote-Ressource zu lesen.

In diesem Beispiel verwenden wir die fetch-Funktion, um eine Remote-Ressource anzufordern und ein Response-Objekt zu erhalten. Das Response-Objekt hat eine body-Eigenschaft, die ein ReadableStream ist, mit dem wir die Daten aus der Antwort lesen können.

Wir verwenden dann die Methode .getReader(), um ein reader-Objekt zu erhalten und lesen die Daten aus dem Stream mit derselben async-Funktion wie im vorherigen Beispiel. Diesmal handelt es sich bei den gelesenen Daten um den Inhalt der Datei file.txt auf dem Server.

const {Readable} = require('readable-stream');

(async function read() {
  const response = await fetch("http://example.com/file.txt");
  const stream = response.body;
  const reader = stream.getReader();

  while (true) {
    const { value, done } = await reader.read();
    if (done) {
      break;
    }
    console.log(value);
  }
})();

Ausgang: