WebTransportによる低レイテンシブラウザ通信

マルチプレイヤーゲーム、ライブテレメトリーダッシュボード、またはリアルタイムコラボレーションツールを構築したことがあるなら、WebSocketで快適に実現できることの限界に直面したことがあるでしょう。単一の順序付きストリームは、問題が発生するまでは問題なく機能します。しかし、1つの遅いパケットが後続のすべてをブロックすると、ユーザーはすぐにそれを感じ取ります。

WebTransport APIは、まさにこの問題のために設計されています。HTTP/3上で動作する低レイテンシ通信チャネルをブラウザに提供し、信頼性のあるストリームと信頼性のないデータグラムの両方をサポートします。TCPベースのトランスポートに付随するヘッドオブラインブロッキングの問題もありません。

WebTransport APIが実際に行うこと

WebTransportはHTTP/3サーバーへの接続を確立し、2つの異なる通信プリミティブを公開します。

• データグラム — 信頼性がなく、順序付けされていない、低オーバーヘッドのパケット。UDPと考えてください。ただし、暗号化と輻輳制御が組み込まれています。
• ストリーム — 信頼性があり、順序付けされたデータチャネル。複数のストリームが単一の接続上で並行して実行でき、互いにブロックすることはありません。

WebSocketとの主要なアーキテクチャ上の違いは、WebTransportがQUIC(UDPベースのトランスポートプロトコル)上で動作することです。QUICは各ストリームを独立して処理するため、停滞したストリームが他のストリームを遅延させることはありません。TCPベースのWebSocketにはこのような分離機能がなく、1つの遅いメッセージが接続全体をブロックします。

WebTransportのストリームとデータグラム:配信セマンティクス

どのプリミティブを使用するかを選択する前に、配信保証を理解することが重要です。

データグラムはドロップされたり、順不同で到着したりする可能性があります。パスMTUによってサイズが制約されます。完全性よりも鮮度が重要な場合に使用します。例えば、ゲーム入力、センサー読み取り値、カーソル位置などです。

ストリームは、特定のストリーム内で順序付けされた信頼性のある配信を保証します。単方向ストリーム(クライアントからサーバー、またはサーバーからクライアント)または双方向ストリームを開くことができます。重要なのは、順序は単一のストリーム内でのみ保証され、複数のストリーム間では保証されないということです。

const transport = new WebTransport("https://example.com:4999/game")
await transport.ready

// 低レイテンシデータグラムを送信
const writer = transport.datagrams.writable.getWriter()
await writer.write(new Uint8Array([1, 2, 3]))

// 信頼性のある双方向ストリームを開く
const stream = await transport.createBidirectionalStream()
const streamWriter = stream.writable.getWriter()
await streamWriter.write(new Uint8Array([4, 5, 6]))

WebTransport vs WebSocket:それぞれをいつ使用するか

これは置き換えの話ではなく、適合性の話です。

単一の信頼性のあるメッセージストリームが必要で、広範な互換性が重要な場合、WebSocketは適切なツールです。アプリケーションが多重化から真に恩恵を受けるか、部分的な配信を許容できる場合に、WebTransportはその価値を発揮します。

WebRTCデータチャネルも同様の機能を提供しますが、ICEネゴシエーション、STUN/TURNサーバー、および大幅なセットアップオーバーヘッドが必要です。WebTransportはクライアント-サーバーシナリオではよりシンプルで、Web Workers内でも動作します。

ブラウザサポートとインフラストラクチャ要件

WebTransportにはセキュアコンテキスト(HTTPS)とHTTP/3対応サーバーが必要です。Chromiumベースのブラウザ(Chrome、Edge)で十分にサポートされており、Firefoxでもサポートが追加されています。Safariのサポートはより最近追加されました。まだ普遍的なベースラインとは見なされていないため、機能検出が不可欠です。現在のサポート状況はwebstatus.devで確認できます。

if ("WebTransport" in window) {
  // WebTransportを使用
} else {
  // WebSocketにフォールバック
}

ローカル開発では、webtransport.dayがコミュニティによって維持されているエコーサーバーを提供しており、独自のHTTP/3インフラストラクチャを構築することなくテストできます。

結論

WebTransportはWebSocketを置き換えるものではなく、ブラウザで可能なことを拡張します。真の価値はアーキテクチャ上のものです。信頼性のない時間に敏感なデータと信頼性のある制御メッセージを単一の接続上で送信でき、互いに影響を与えることがありません。レイテンシとスループットの両方が重要なリアルタイムアプリケーションにとって、これは利用可能な意味のある機能です。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.