このページは Cloud Translation API によって翻訳されました。

WebTransport の使用

WebTransport は、低レイテンシの双方向のクライアントサーバーメッセージングを提供する API です。ユースケースと、今後の実装に関するフィードバックの提供方法をご確認ください。

Jeff Posnick

背景

WebTransport とは

WebTransport は、HTTP/3 プロトコルを双方向トランスポートとして使用するウェブ API です。これは、ウェブクライアントと HTTP/3 サーバー間の双方向通信を対象としています。Datagram API を介した信頼性の低いデータ送信と、Streams API を介した信頼性の低いデータ送信の両方をサポートしています。

データグラムは、強力な配信保証を必要としないデータの送受信に最適です。個々のデータパケットのサイズは、基盤となる接続の最大伝送単位（MTU）によって制限され、正常に送信される場合とそうでない場合があります。また、転送された場合、任意の順序で到着する可能性があります。これらの特性により、Datagram API は低レイテンシでベストエフォートのデータ転送に最適です。データグラムはユーザーデータグラムプロトコル（UDP）のメッセージと考えることができますが、暗号化され、輻輳制御されます。

一方、ストリーム API は、信頼性の高い、順序付けられたデータ転送を提供します。これは、順序付けされたデータの 1 つ以上のストリームを送受信する必要があるシナリオに適しています。複数の WebTransport ストリームを使用することは、複数の TCP 接続を確立することに似ていますが、HTTP/3 は内部で軽量の QUIC プロトコルを使用するため、それほど多くのオーバーヘッドなしで開閉できます。

ユースケース

これは、デベロッパーが WebTransport を使用する可能性がある方法のほんの一例です。

小規模で信頼性の低い順不同のメッセージを介して、ゲームの状態を最小限のレイテンシでサーバーに送信する。
サーバーからプッシュされたメディアストリームを、他のデータストリームとは別に最小限のレイテンシで受信する。
ウェブページが開いている間に、サーバーからプッシュされた通知を受信する。

Google では、WebTransport の利用計画について、詳細をお聞かせいただきたいと考えています。

ブラウザサポート

対応ブラウザ

ソース

ブラウザのユニバーサルサポートがないすべての機能と同様に、機能検出による防御的なコーディングがベストプラクティスです。

現在のステータス

ステップ	ステータス
1. 説明を作成	完了
2. 仕様の最初のドラフトを作成する	完了
3. フィードバックを収集して設計を繰り返す	完了
4. オリジントライアル	完了
5. リリース	Chromium 97

WebTransport と他のテクノロジーの関係

WebTransport は WebSocket に代わるものですか？

可能であるとは言いきれません。ユースケースによっては、WebSockets または WebTransport が有効な通信プロトコルである場合もあります。

WebSocket の通信は、信頼性の高い、順序付けされた単一のメッセージストリームをモデルにしているため、通信のニーズによってはこれで十分です。これらの特性が必要な場合は、WebTransport のストリーム API でも使用できます。これに対して、WebTransport の Datagram API は低レイテンシで配信し、信頼性や順序は保証されないため、WebSocket の直接的な代替ではありません。

Datagram API、または複数の同時 Streams API インスタンスを介して WebTransport を使用すると、WebSocket の問題になり得るヘッドオブラインブロッキングを心配する必要がなくなります。また、基盤となる QUIC handshake は TCP over TLS を起動するよりも高速であるため、新しい接続を確立する場合はパフォーマンス上の利点があります。

WebTransport は新しいドラフト仕様の一部であるため、クライアントライブラリとサーバーライブラリを中心とする WebSocket エコシステムは現在、はるかに堅牢です。一般的なサーバー設定ですぐに機能し、幅広いウェブクライアントサポートを必要とする場合は、WebSockets の方が適しています。

WebTransport は UDP Socket API と同じですか？

いいえ。WebTransport は UDP Socket API ではありません。WebTransport は HTTP/3 を使用し、HTTP/3 は「内部で」UDP を使用しますが、WebTransport には暗号化と輻輳制御に関する要件があり、基本的な UDP Socket API を超えるものとなっています。

WebTransport は WebRTC データチャネルに代わるものですか？

○（クライアントサーバー接続の場合）WebTransport は WebRTC データチャネルと同じプロパティの多くを共有しますが、基盤となるプロトコルは異なります。

一般に、HTTP/3 互換サーバーを運用する場合、WebRTC サーバーを維持するよりもセットアップや構成が少なくて済みます。WebRTC の場合、トランスポートを正常に動作させるには、複数のプロトコル（ICE、DTLS、SCTP）について理解する必要があります。WebRTC では、クライアントとサーバーのネゴシエーションが失敗する原因となり得る、さらに多くの流動的な要素が必要です。

WebTransport API は、ウェブデベロッパーのユースケースを念頭に置いて設計されているため、WebRTC のデータチャネルインターフェースを使用するよりも、最新のウェブプラットフォームコードを記述するように感じられます。WebRTC とは異なり、WebTransport はウェブワーカー内でサポートされているため、特定の HTML ページとは無関係にクライアントとサーバー間の通信を行うことができます。WebTransport は Streams 準拠のインターフェースを公開するため、バックプレッシャーに関する最適化をサポートしています。

ただし、すでに WebRTC クライアント/サーバーが正しく機能している設定に満足している場合は、WebTransport に切り替えても多くのメリットが得られるとは限りません。

試してみる

WebTransport をテストする最良の方法は、互換性のある HTTP/3 サーバーを起動することです。その後、このページを基本的な JavaScript クライアントで使用して、クライアント/サーバー通信を試すことができます。

また、コミュニティが管理するエコーサーバーは webtransport.day で利用できます。

API の使用

WebTransport は、Streams API などの最新のウェブプラットフォームプリミティブ上に設計されています。Promise に大きく依存し、async および await とうまく連携します。

Chromium に現在実装されている WebTransport は、データグラムと単方向ストリームと双方向ストリームの 3 種類のトラフィックに対応しています。

サーバーへの接続

HTTP/3 サーバーに接続するには、WebTransport インスタンスを作成します。URL のスキームは https にする必要があります。ポート番号を明示的に指定する必要があります。

接続が確立されるまで待つには、ready Promise を使用する必要があります。この Promise は設定が完了するまで実行されず、QUIC/TLS の段階で接続が失敗した場合は拒否されます。

closed Promise は、接続が正常に終了すると解決され、予期せぬ終了だった場合は拒否されます。

クライアント表示エラー（URL のパスが無効など）によりサーバーが接続を拒否した場合、closed は拒否され、ready は未解決のままになります。

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);

// Optionally, set up functions to respond to
// the connection closing:
transport.closed.then(() => {
  console.log(`The HTTP/3 connection to ${url} closed gracefully.`);
}).catch((error) => {
  console.error(`The HTTP/3 connection to ${url} closed due to ${error}.`);
});

// Once .ready fulfills, the connection can be used.
await transport.ready;

Datagram API

サーバーに接続した WebTransport インスタンスを取得したら、それを使用して、データグラムと呼ばれる個別のデータを送受信できます。

writeable ゲッターは WritableStream を返します。ウェブクライアントは、これを使用してサーバーにデータを送信できます。readable ゲッターは ReadableStream を返します。これにより、サーバーからのデータをリッスンできます。どちらのストリームも本質的に信頼性が低いため、書き込んだデータがサーバーで受信されない、またはその逆の可能性がある。

どちらのタイプのストリームも、データ転送に Uint8Array インスタンスを使用します。

// Send two datagrams to the server.
const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
const data2 = new Uint8Array([68, 69, 70]);
writer.write(data1);
writer.write(data2);

// Read datagrams from the server.
const reader = transport.datagrams.readable.getReader();
while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  // value is a Uint8Array.
  console.log(value);
}

注: Chrome では現在、ReadableStream のasync iteratorを公開していません。当面は、ストリームからの読み取りには、getReader() メソッドを while() ループと組み合わせて使用するのが最善の方法です。

Streams API

サーバーに接続すると、WebTransport を使用して Streams API を介してデータを送受信することもできます。

すべてのストリームの各チャンクは Uint8Array です。Datagram API とは異なり、これらのストリームは信頼性に優れています。ただし、各ストリームは独立しているため、ストリーム間でのデータの順序は保証されません。

WebTransportSendStream

WebTransportSendStream は、WebTransport インスタンスの createUnidirectionalStream() メソッドを使用してウェブクライアントによって作成され、WebTransportSendStream の Promise を返します。

WritableStreamDefaultWriter の close() メソッドを使用して、関連する HTTP/3 接続を閉じます。ブラウザは、関連する接続を実際に閉じる前に、保留中のデータをすべて送信しようとします。

// Send two Uint8Arrays to the server.
const stream = await transport.createUnidirectionalStream();
const writer = stream.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
const data2 = new Uint8Array([68, 69, 70]);
writer.write(data1);
writer.write(data2);
try {
  await writer.close();
  console.log('All data has been sent.');
} catch (error) {
  console.error(`An error occurred: ${error}`);
}

同様に、WritableStreamDefaultWriter の abort() メソッドを使用して、RESET\_STREAM をサーバーに送信します。abort() を使用している場合、ブラウザは、まだ送信されていない保留中のデータをすべて破棄することがあります。

const ws = await transport.createUnidirectionalStream();
const writer = ws.getWriter();
writer.write(...);
writer.write(...);
await writer.abort();
// Not all the data may have been written.

WebTransportReceiveStream

WebTransportReceiveStream がサーバーによって開始されます。ウェブクライアントの場合、WebTransportReceiveStream の取得は 2 段階のプロセスです。まず、WebTransport インスタンスの incomingUnidirectionalStreams 属性を呼び出します。これにより、ReadableStream が返されます。ReadableStream の各チャンクは、さらに、サーバーから送信された Uint8Array インスタンスの読み取りに使用できる WebTransportReceiveStream です。

async function readFrom(receiveStream) {
  const reader = receiveStream.readable.getReader();
  while (true) {
    const {done, value} = await reader.read();
    if (done) {
      break;
    }
    // value is a Uint8Array
    console.log(value);
  }
}

const rs = transport.incomingUnidirectionalStreams;
const reader = rs.getReader();
while (true) {
  const {done, value} = await reader.read();
  if (done) {
    break;
  }
  // value is an instance of WebTransportReceiveStream
  await readFrom(value);
}

ストリームの終了は、ReadableStreamDefaultReader の closed Promise を使用して検出できます。基盤となる HTTP/3 接続が FIN ビットで閉じられると、すべてのデータが読み取られた後に closed Promise が実行されます。HTTP/3 接続が（RESET\_STREAM などによって）突然閉じられた場合、closed Promise は拒否されます。

// Assume an active receiveStream
const reader = receiveStream.readable.getReader();
reader.closed.then(() => {
  console.log('The receiveStream closed gracefully.');
}).catch(() => {
  console.error('The receiveStream closed abruptly.');
});

WebTransportBidirectionalStream

WebTransportBidirectionalStream は、サーバーまたはクライアントのいずれかによって作成されます。

ウェブクライアントは、WebTransport インスタンスの createBidirectionalStream() メソッドを使用してこれを作成できます。このメソッドは WebTransportBidirectionalStream の Promise を返します。

const stream = await transport.createBidirectionalStream();
// stream is a WebTransportBidirectionalStream
// stream.readable is a ReadableStream
// stream.writable is a WritableStream

WebTransport インスタンスの incomingBidirectionalStreams 属性を使用して、サーバーによって作成された WebTransportBidirectionalStream をリッスンできます。これにより、ReadableStream が返されます。この ReadableStream の各チャンクは、今度は WebTransportBidirectionalStream です。

const rs = transport.incomingBidirectionalStreams;
const reader = rs.getReader();
while (true) {
  const {done, value} = await reader.read();
  if (done) {
    break;
  }
  // value is a WebTransportBidirectionalStream
  // value.readable is a ReadableStream
  // value.writable is a WritableStream
}

WebTransportBidirectionalStream は、単に WebTransportSendStream と WebTransportReceiveStream を組み合わせたものです。前の 2 つのセクションの例では、それぞれの使用方法を説明します。

その他の例

WebTransport のドラフト仕様には、追加のインラインの例のほか、すべてのメソッドとプロパティの完全なドキュメントが含まれています。

Chrome の DevTools の WebTransport

残念ながら、現時点では Chrome の DevTools は WebTransport をサポートしていません。この Chrome の問題に「スター」を付けると、DevTools インターフェースの更新について通知を受け取ることができます。

ポリフィル

WebTransport の一部の機能を実装する webtransport-ponyfill-websocket というポリフィル（使用可能なスタンドアロンモジュールとして機能を提供するポニーフィル）を利用できます。プロジェクトの README の制約をよく読み、このソリューションがユースケースに適しているかどうかを判断してください。

プライバシーとセキュリティに関する考慮事項

正式なガイダンスについては、仕様ドラフトの対応するセクションをご覧ください。

フィードバック

Chrome チームでは、この API を使用する皆様のご意見やご感想をお待ちしています。

API 設計に関するフィードバック

API について、何かおかしい点や、期待どおりに動作しない点はありますか。あるいは、アイデアを実現するために欠けている要素はありませんか？

Web Transport GitHub リポジトリで問題を報告するか、既存の問題にご意見をお寄せください。

実装に問題がある場合

Chrome の実装にバグが見つかりましたか？

https://new.crbug.com でバグを報告します。再現するための簡単な手順とともに、できる限り詳細を記載します。

API を使用する予定がある場合は、

一般公開のサポートにより、Chrome で機能の優先度が下がるとともに、他のブラウザベンダーがそれらの機能をサポートすることがいかに重要であるかがわかります。

ハッシュタグ #WebTransport と、その使用場所や使用方法の詳細を使用して、@ChromiumDev にツイートを送信してください。

全般的な話題

他のどのカテゴリにも当てはまらない一般的な質問や問題には、web-transport-dev Google グループを使用できます。

謝辞

この記事には、WebTransport Explainer、ドラフト仕様、関連する設計ドキュメントの情報を盛り込んでいます。基盤を提供してくれたそれぞれの作成者に感謝します。

この投稿のヒーロー画像は、Unsplash の Robin Pierre 氏によるものです。