どこでもウェブストリーム（およびnode.jsのフェッチ）-CSSチュートリアル-php.cn

どこでもウェブストリーム（およびnode.jsのフェッチ）

ジェイク・アーチボルドの2016年の「ウェブストリームの年」の予測は、その時代をわずかに上回っていたかもしれません。ただし、2014年に最初に提案されたStreams Standardは現在、最新のブラウザー（Firefoxが追いつく）とNode.js（およびDeno）に一貫して実装されています。

ストリームの理解

ストリーミングは、それらをより小さな「チャンク」に分割し、それらを順次処理することにより、大規模なデータリソースを効率的に処理します。これにより、処理が開始される前に完全なダウンロードを待つことができなくなり、プログレッシブデータ処理が可能になります。

3つのメインストリームタイプが存在します：読み取り可能、書き込み可能、および変換ストリーム。読み取り可能なストリームは、データチャンクを提供します（ファイルやHTTP接続などのソースから）。変換ストリーム（オプション）これらのチャンクを変更します。最後に、書き込み可能なストリームは処理されたデータを受信します。

Webストリーム：クロスプラットフォームの一貫性

Node.jsには最初は独自のストリーム実装があり、しばしば複雑と見なされました。 StreamsのWhatWG Web標準は、Node.jsドキュメントで「Web Streams」と呼ばれる大幅な改善を提供します。元のnode.jsストリームは残っていますが、Web標準のAPIが共存し、クロスプラットフォームコードを促進し、開発を簡素化します。

Node.jsの元の著者によって作成されたDenoは、Webストリームを完全にサポートし、ブラウザAPIをミラーリングしています。 CloudFlare WorkersとDeno Deployは、この標準化されたアプローチも活用しています。

`fetch()`および読み取り可能なストリーム

読み取り可能なストリームを作成する最も一般的な方法はfetch()を使用することです。 fetch()通話のresponse.bodyは読み取り可能なストリームです。

 fetch（ 'data.txt'）
.then（response => console.log（respons.body））;

ログイン後にコピー

コンソールログは、いくつかの有用なストリーム方法を明らかにします。仕様が述べているように、読み取り可能なストリームは、 pipeTo()を使用して書き込み可能なストリームに直接配管するか、 pipeThrough()を使用して変換ストリームをパイプすることができます。

node.jsコアには組み込みのfetchサポートがありません。 node-fetch （人気ライブラリ）は、WhatWGストリームではなく、ノードストリームを返します。 Node.jsチームの新しいHTTP/1.1クライアントであるUndici 、 http.requestの最新の代替品を提供し、 response.bodyがWebストリームを返すfetch実装を提供します。 Undici 、node.jsで推奨されるHTTPリクエストハンドラーになる可能性があります。インストール（ npm install undici ）が、ブラウザfetchと同様に機能します。次の例は、変換ストリームを通してストリームをパイプします：

 'undici'から{fetch}をインポートします。
'node：stream/web'から{textdecoderStream}をimpontします。

async関数fetchStream（）{
  const response = await fetch（ 'https://example.com'）;
  const stream = response.body;
  const textStream = stream.pipethrough（new TextDecoderStream（））;
  // ... TextStreamのさらなる処理...
}

ログイン後にコピー

response.bodyは同期です。 await必要はありません。ブラウザコードはほぼ同じで、 fetchとTextDecoderStreamがグローバルに利用可能であるため、 importステートメントを省略します。デノにはネイティブのサポートもあります。

非同期反復

for-await-ofループは非同期反復を提供し、ループの機能を非同期反復for-of （約束のストリームや配列など）に拡張します。

 async関数fetchandlogstream（）{
  const response = await fetch（ 'https://example.com'）;
  const stream = response.body;
  const textStream = stream.pipethrough（new TextDecoderStream（））;

  待っている（テキストストリームのconst chunk）{
    console.log（chunk）;
  }
}

fetchandlogstream（）;

ログイン後にコピー

これは、node.js、deno、および最新のブラウザーで機能します（ただし、ブラウザストリームサポートはまだ開発されています）。

追加の読み取り可能なストリームソース

fetch()は一般的ですが、他のメソッドは読み取り可能なストリームを作成します： Blob.stream()およびFile.stream() （node.js import { Blob } from 'buffer';が必要です）。ブラウザで、<input type="file">要素は簡単にファイルストリームを提供します：

 const fileStream = document.querySelector（ 'input'）。ファイル[0] .stream（）;

ログイン後にコピー

node.js 17はfs/promises.open()からFileHandle.readableWebStream()を導入します。

 'node：fs/promises'から{open}をインポートします。

// ...（ファイルとプロセスストリームを開く）...

ログイン後にコピー

ストリーミングと約束の統合

ストリーム後の完了アクションの場合、約束は有用です：

 somereadableStream
.pipeto（somewritable -estream）
.then（（）=> console.log（ "data writed"）））
.catch（error => console.error（ "error"、error））;

ログイン後にコピー

またはawaitを使って：

 somereadablestream.pipeto（somewritable -estream）を待っています。

ログイン後にコピー

カスタム変換ストリーム作成

TextDecoderStream （およびTextEncoderStream ）を超えて、 TransformStreamを使用してカスタム変換ストリームを作成できます。コンストラクターは、オプションのstart 、 transform 、およびflushメソッドを備えたオブジェクトを受け入れます。 transformデータ変換を実行します。

これは、単純化された目的のためです。本番目にTextDecoderStreamを使用してください）テキストデコーダー：

 const decoder = new TextDecoder（）;
const decodeStream = new TransformStream（{
  変換（Chunk、コントローラー）{
    controller.enqueue（decoder.decode（chunk、{stream：true}））;
  }
}）;

ログイン後にコピー

同様に、 ReadableStreamを使用してカスタム読み取り可能なストリームを作成し、 start 、 pull 、およびcancel機能を提供できます。 start関数は、 controller.enqueueを使用してチャンクを追加します。

ノードストリームの相互運用性

node.jsは、ノードストリームとWebストリーム間を変換するために、 .fromWeb()および.toWeb()メソッド（node.js 17）を提供します。

結論

ブラウザとnode.js APIの収束は続き、ストリームはこの統合の重要な部分です。完全なフロントエンドストリームの採用はまだ進行中ですが（たとえば、 MediaStreamまだ読みやすいストリームではありません）、将来はより広範なストリームの利用を指します。効率的なI/Oおよびクロスプラットフォーム開発の可能性により、学習Webストリームは価値があります。

以上がどこでもウェブストリーム（およびnode.jsのフェッチ）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。