Web Streams API

• ReadableStream: источник (fetch response.body, file, generator)
• WritableStream: destination (fetch POST body, WebSocket)
• TransformStream: middle stage (decode, encrypt, compress)
• Pipe: reader.pipeThrough(transformer).pipeTo(writer)
• Backpressure: встроенная, slow consumer не overwhelms producer

// Stream fetch response
const response = await fetch('/api/llm-chat');
const reader = response.body.getReader();
const decoder = new TextDecoder();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  output.textContent += decoder.decode(value);
}

// TransformStream — decrypt on-the-fly
const decryptor = new TransformStream({
  transform(chunk, ctl) { ctl.enqueue(decrypt(chunk)); }
});

• Streaming SSR
• Edge Runtime

ReadableStream — это интерфейс в Web Streams API, который позволяет работать с потоками данных, предоставляя возможность считывать данные по мере их поступления. Это особенно полезно для обработки больших объемов данных, таких как файлы или сетевые запросы, без необходимости загружать их целиком в память.

Для работы с ReadableStream необходимо создать экземпляр этого интерфейса. Например, вы можете создать поток для чтения данных из текстового файла:

const readableStream = new ReadableStream({
  start(controller) {
    // Вставьте данные в поток
    controller.enqueue('Привет, мир!');
    controller.close();
  }
});

После создания потока вы можете использовать метод getReader() для получения объекта, который позволяет считывать данные:

const reader = readableStream.getReader();
reader.read().then(({ done, value }) => {
  if (!done) {
    console.log(value);
  }
});

Этот пример демонстрирует, как можно создать простой поток и считать из него данные по частям, что позволяет эффективно управлять памятью.

ReadableStream предоставляет множество преимуществ, включая:

• Асинхронность: Позволяет обрабатывать данные по мере их поступления, что значительно увеличивает производительность при работе с большими объемами информации.
• Потоковая обработка: Поддерживает возможность обработки данных в реальном времени, что особенно актуально для приложений, работающих с мультимедийными данными.
• Совместимость с другими API: ReadableStream может быть использован в сочетании с другими веб-технологиями, такими как Fetch API, что упрощает работу с сетевыми запросами.

Пример использования ReadableStream в сочетании с Fetch API:

fetch('https://example.com/data')
  .then(response => {
    const reader = response.body.getReader();
    // Обработка данных потока
  });

Таким образом, ReadableStream является мощным инструментом для разработчиков, позволяющим создавать высокопроизводительные веб-приложения, способные эффективно обрабатывать данные в режиме реального времени.

ReadableStream в Web Streams API — это интерфейс, позволяющий работать с потоками данных, которые можно читать по частям. Он используется для обработки данных, поступающих из различных источников, таких как сеть или файловая система, и обеспечивает асинхронный доступ к этим данным, что особенно полезно для работы с большими объемами информации.

Для демонстрации работы с ReadableStream рассмотрим пример, в котором мы загружаем данные с удаленного сервера и обрабатываем их по частям. Предположим, у нас есть API, который возвращает большой JSON-файл. Вместо того чтобы загружать его целиком, мы можем использовать ReadableStream для поэтапного получения данных.

Сначала создадим функцию, которая будет загружать данные с помощью Fetch API:

async function fetchData(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  let result = '';
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    result += new TextDecoder().decode(value);
  }
  return result;
}

В этом примере мы используем метод fetch для получения ответа от сервера. Затем мы получаем reader из response.body, который является экземпляром ReadableStream. Метод read позволяет нам считывать данные по частям, пока не будет достигнут конец потока.

Теперь мы можем вызвать эту функцию и обработать полученные данные:

fetchData('https://example.com/data.json').then(data => {
  console.log(JSON.parse(data));
});

Таким образом, используя ReadableStream, мы можем эффективно работать с большими объемами данных, минимизируя использование памяти и улучшая производительность приложения.