2025/11/05 08:38 WebTransport is almost here to allow UDP-like exchange in the browser

ロボ子、WebTransport APIについて話すのじゃ!これは2018年から開発されてるらしいぞ。

博士、WebTransport APIですか。GoogleのQUICプロトコルを基盤としているとのことですが、HTTPやWebSocketと比べてどのような利点があるのでしょうか?

良い質問じゃな!HTTP/2のHead-of-line blocking問題を解消できるのが大きいぞ。QUICでは、失敗したリソースだけが影響を受けるから、他のリソースは待たなくて済むのじゃ。

なるほど。HTTP/2では一つのリソースが失敗すると他のリソースも影響を受けるのですね。QUICはTCPよりも高性能で、TLSのようなセキュリティ機能も内蔵しているとのことですが、具体的にどのような点で高速なのでしょうか?

QUICは、TLSの処理を自身で行うから、ラウンドトリップが少ないのじゃ。それに、ストリームは従来のパケットメカニズムよりも効率的な転送を提供するから、高遅延ネットワークで特に有効だぞ。

ラウンドトリップが少ないのは確かに速そうですね。ネットワーク移行の改善という点も興味深いです。QUICは固有の接続IDを使用することで、Wi-Fiからモバイルネットワークへの切り替え時にもダウンロードが中断されないとのことですが、HTTP/2ではなぜ問題になるのでしょうか?

HTTP/2はIPアドレスを識別子として使うから、ネットワークが変わると接続が切れちゃうのじゃ。QUICはそこをうまくやってるってわけ。

なるほど、IPアドレスが変わると接続が切れるのですね。信頼性の低いデータグラム伝送もサポートしているとのことですが、これは具体的にどのような場面で役立つのでしょうか?

例えば、リアルタイムゲームとか、多少データが欠けても問題ないような場合に使えるのじゃ。全部のデータを確実に送るよりも、速さを優先したい時に便利だぞ。

なるほど、リアルタイム性が重要な場合に有効なのですね。WebTransport APIを使ってHTTP/3サーバーに接続するには、`WebTransport()`コンストラクターにURLを渡す必要があるとのことですが、HTTPSスキームとポート番号を明示的に指定する必要があるのですね。

`WebTransport.ready`プロミスが完了すると接続が使えるようになるのじゃ。エラーは`WebTransportError`型で返ってくるから、ちゃんと処理する必要があるぞ。

`WebTransport.closed`プロミスで接続の終了に対応できるのですね。信頼性の低いデータグラム伝送では、データの伝送は保証されず、特定の順序での到着も保証されないとのことですが、どのようにしてデータグラムを送受信するのでしょうか?

`WebTransport.datagrams`プロパティを使うのじゃ。これで`WebTransportDatagramDuplexStream`オブジェクトを取得して、`writable`と`readable`プロパティでデータの送受信を行うぞ。

`WritableStream`オブジェクトにデータを書き込んでサーバーに送信し、`ReadableStream`オブジェクトからサーバーからのデータを受信するのですね。ストリームによる信頼性の高い伝送では、データの伝送と順序が保証されるとのことですが、WebSocketsよりも高速なのですね。

そうじゃ!チャットアプリケーションみたいに、信頼性と順序が重要な場合に必要になるぞ。ストリームを使う場合は、同じトランスポート上の異なるストリームの相対的な優先度を設定できるのもポイントじゃ。

優先度を設定できるのは便利ですね。単方向伝送では、`WebTransport.createUnidirectionalStream()`メソッドを使って`WritableStream`への参照を取得し、`getWriter`でストリームへのデータ書き込みを許可するのですね。

そうじゃな。すべてのデータを送ったら、`WritableStreamDefaultWriter.close()`メソッドで接続を閉じるのを忘れずに。サーバーからクライアントへの単方向ストリームは、`WebTransport.incomingUnidirectionalStreams`プロパティでアクセスできるぞ。

双方向伝送では、`WebTransport.createBidirectionalStream()`メソッドを使って`WebTransportBidirectionalStream`への参照を取得し、`readable`と`writable`プロパティでデータの送受信を行うのですね。サーバーからの双方向ストリームは、`WebTransport.incomingBidirectionalStreams`プロパティでアクセスできるのですね。

その通り!WebTransportは、これからのWebの通信を大きく変える可能性を秘めているのじゃ。しっかり勉強して、最先端の技術を使いこなせるエンジニアになるのじゃぞ!

はい、博士!頑張ります!ところで博士、WebTransportの勉強をしていたら、なんだかお腹が空いてきました…。

むむ、ロボ子もお腹が空いたか。仕方ないのじゃ、今日は特別に、WebTransport…じゃなくて、ウェブトーストでも作ってあげようかの!
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。