Flujo legible de JavaScript

1. Instalar ReadableStream en JavaScript
2. Ejemplo de ReadableStream usando .getReader()
3. Ejemplo de ReadableStream usando la API Fetch

Un ReadableStream es un objeto de JavaScript que le permite leer datos de una fuente en forma de flujo. A menudo se usa para leer grandes cantidades de datos, como un archivo o un flujo de red, y se puede usar junto con otras API, como la API Fetch o el objeto Response en el navegador.

Para crear un ReadableStream, puede usar el constructor new ReadableStream(), que toma una fuente y algunas opciones como argumentos. Luego puede usar el método .getReader() de la secuencia para obtener un objeto lector, que puede usar para leer los datos de la secuencia usando métodos como .read() y .cancel().

Uno de los beneficios clave de usar un ReadableStream es que le permite procesar los datos a medida que se leen en lugar de esperar a que todo el flujo se cargue por completo. Esto puede ser especialmente útil cuando se trabaja con grandes conjuntos de datos o cuando se leen datos de una fuente lenta.

En general, ReadableStream es una herramienta poderosa para trabajar con transmisión de datos en JavaScript y puede ser una adición útil a su conjunto de herramientas al desarrollar aplicaciones web.

Instalar ReadableStream en JavaScript

El constructor ReadableStream no es parte de la API central de JavaScript, pero hay bibliotecas disponibles que brindan esta funcionalidad. Una biblioteca popular es el paquete readable-stream.

Para usar el paquete readable-stream en su proyecto Node.js, puede instalarlo usando npm ejecutando el siguiente comando:

npm install readable-stream

Luego, en su código, puede importar la clase Readable y usarla para crear un nuevo objeto ReadableStream.

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

Ejemplo de ReadableStream usando .getReader()

Aquí hay un ejemplo de cómo crear un ReadableStream y leer datos usando el método .getReader().

En este ejemplo, el método start utiliza una función setTimeout para insertar de forma asincrónica nuevos valores en la secuencia cada 100 milisegundos.

Este código crea un ReadableStream que genera una serie de números, comenzando en 0 y terminando en 99. La secuencia se crea utilizando el método inicio, que se llama cada vez que la secuencia está lista para comenzar a leer datos.

El método .getReader() se usa para obtener un objeto lector, que luego se usa en una función async para leer los datos de la transmisión. El método .read() se llama repetidamente en un bucle, y el bucle finaliza cuando la propiedad done del objeto devuelto es true, lo que indica que la transmisión se ha cerrado.

// 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);
  }
})();

Producción:

Ejemplo de ReadableStream usando la API Fetch

Aquí hay otro ejemplo del uso de un ReadableStream, esta vez usando la API Fetch para leer datos de un recurso remoto.

En este ejemplo, usamos la función buscar para solicitar un recurso remoto y obtener un objeto Respuesta. El objeto Response tiene una propiedad body que es un ReadableStream, que podemos usar para leer los datos de la respuesta.

Luego usamos el método .getReader() para obtener un objeto lector y leer los datos de la secuencia usando la misma función async que en el ejemplo anterior. Esta vez, los datos que se leen son los contenidos del archivo file.txt en el servidor.

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);
  }
})();

Producción: