WebストリームAPIの実用的な見方

Streams APIは、すべてのデータが処理される前に到着するのを待つ必要があるという問題を解決し、データがストリーミングするときにデータの増分処理を可能にします。これは、次の3つのコアタイプを使用して実現されます。1。データチャンクを消費するためのReadableStreamなど、メモリに完全にロードせずに大きなログファイルを読み取るなど。 2。サービスワーカーのキャッシュに直接ビデオ応答をストリーミングするなど、データを段階的に書き込むためのWritableStream。 3。GZIP応答の減圧やテキストの解読、効率的で構成可能なパイプラインを可能にするなど、その場でデータを変換するための変換する。実際のユースケースには、AI応答のストリーミング、大規模なCSVの解析、リアルタイムメディア処理、および進行状況追跡による暗号化されたファイルのアップロードが含まれます。

Web Streams APIは、単なる抽象的な仕様だけではありません。これは、長年にわたってWebでのパフォーマンスとユーザーエクスペリエンスを静かに可能にする実用的なツールです。直接使用したかどうかにかかわらず、大きなファイルを取得したり、メディアを処理したり、リアルタイムデータを処理したりするときに、それから恩恵を受ける可能性があります。それが実際に何をしているのか、それが役立つ場所、そしてそれを効果的に使用する方法を根拠のある見てみましょう。

Streams APIはどのような問題を解決しますか？

そのコアでは、Streams APIは基本的な制限に対処します。使用を開始する前に、すべてのデータが到着するのを待つ必要はありません。

100MBのJSONファイルをダウンロードすることを想像してください。伝統的に、 fetch()解析前に応答全体がダウンロードするのを待ちます。つまり、データの最初の塊がすぐに何か有用なものをレンダリングできる場合でも、ダウンロードが終了するまでユーザーは空白の画面を見つめます。

ストリームを使用すると、データが到着するにつれてデータを段階的に処理できます。これは特に強力です：

• 大きなファイルのダウンロード（例：CSV、ビデオ、ログ）
• リアルタイムデータ（たとえば、サーバーセントイベント、AI応答）
• フライでのデータの変換（例えば、減圧、ラインごとの解析）

すべてをメモリに保持する代わりに、塊を読み、変換し、消費することができます。

3種類のストリーム（およびそれらを使用するタイミング）

Streams APIは、3つの主要なタイプを定義します。

• ReadAbleStream ：データが流れ出す（例、 fetch() Response Body）
• WritableStream ：データが流れます（たとえば、ファイルまたはネットワークへの書き込み）
• TransformStream ：読み取り可能で書き込み可能な両方の両方で、データが通過するときにデータを変換します

ほとんどの実際のユースケースには、これらを組み合わせることが含まれます。

1.チャンクで大きなファイルを読む

大きなログファイルをダウンロードしていて、到着時に行を表示したいとします。

 const response = await fetch（ '/logs/gage-file.log'）;
const reader = response.body.getReader（）;
const decoder = new TextDecoder（）;

let buffer = '';

while（true）{
  const {done、value} = await reader.read（）;
  if（done）break;

  buffer = decoder.decode（value、{stream：true}）;
  const lines = buffer.split（ '\ n'）;
  buffer = lines.pop（）; //不完全なラインを保持します

  for（const line of line）{
    console.log（ 'processing line：'、line）;
    // UI、フィルター、または分析を更新します
  }
}

これにより、ファイル全体がメモリにロードされ、すぐにフィードバックが表示されます。

2。変換ストリームを通過します

その場でGZIP応答を減圧したいですか？または、UTF-8バイトストリームをテキストに変換しますか？

 const response = await fetch（ '/data.json.gz'）;

const stream = response.body
  .pipethrough（new decompressionstream（ 'gzip'））
  .pipethrough（new TextDecoderStream（））;

const reader = stream.getReader（）;

while（true）{
  const {done、value} = await reader.read（）;
  if（done）break;
  console.log（ 'chunk：'、value）; //プロセス解凍テキスト
}

これは、一時的なバッファーではなく、きれいで構成可能で効率的です。

3。WritableStreamへの書き込み（たとえば、サービスワーカーキャッシュ）

サービスワーカーでは、応答を直接キャッシュにストリーミングできます。

 event.respondwith（
  （async（）=> {
    const response = await fetch（ '/video.mp4'）;
    const {readable、writable} = new Transformstream（）;

    //クライアントとキャッシュの両方に対する応答をストリーミングします
    const resspeclone = respons.clone（）;
    Response.body.pipeto（writable）; //キャッシュに保存します

    新しい応答を返します（読み取り可能、ResponseClone）;
  }）（）
）;

これにより、ユーザーをブロックせずに進行性のキャッシュが可能になります。

実用的なヒントとゴッチャ

強力ですが、ストリームは魔法ではありません。ここに注意すべきことは次のとおりです。

• ブラウザのサポートは、最新のブラウザー（Chrome、Firefox、Edge、Safari 14.1）で堅実ですが、古い環境をサポートするかどうかを確認してください。
• エラー処理の問題- 常にreader.read()拒否とクローズストリームを適切に処理します。
• バックプレッシャーはブラウザで自動的です：消費者が遅い場合、プロデューサーは一時停止します。これは機能であり、バグではありません。
• デコードを忘れないでください- response.bodyはUint8Array提供します。 TextDecoderStreamまたは手動デコードを使用します。
• 非同期と同期処理の混合を避ける- 非同期の流れを採用するときに、ストリームが最適に機能します。

実現していない場合があります

• AIチャットUIS ：LLM APIからトークンをストリーミングし、到着時に表示します。
• CSVパーサー：ファイル全体をロードせずに、ブラウザに大きなCSVを解析します。
• オーディオ/ビデオ処理：再生前にメディアチャンクを変更します（たとえば、フィルタリング、透かし）。
• [進行状況暗号化]を使用したファイルアップロード：アップロードの進行状況を表示しながら、チャンクをリアルタイムで変換します。

これらはエッジケースではなく、標準的な期待になりつつあります。

Streams APIは派手な機能に関するものではありません。効率、応答性、および制御についてです。ストリームで考え始めると、アプリをより速く、より弾力性のあるものにする機会がわかります。そして、最高の部分？フレームワークは必要ありません。フェッチ、デコーダー、非同期の反復に少し忍耐があります。

基本的に、何かをする前にすべてのデータを待っている場合、おそらく間違っているでしょう。

以上がWebストリームAPIの実用的な見方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。