RTCQuicTransportでチャットをつくる

成果物

ソースコードはこちら。

GitHub - leader22/rtcquic-chat-example: Need to register Origin-Trial by yourself ;D

っても、挙動的になにかが大きく変わるのではないので、ほとんどの人は何の感動もないですｗ

とりあえず試す用なので雑に作ってあって、

• VanillaICEで手動シグナリング
  • 2タブ（A, B）を開いて
  • Aの上段でGETしてコピー
  • Bの下段にペーストしてSET
  • Bの上段に出たのをコピー
  • Aの下段にペーストしてSET
• テキストしか送れません
  • 詳細は後述

です。

前提知識

今回Chromeに実装されたやつと、本家仕様には乖離があります・・。

• RTCQuicTransport
  • https://w3c.github.io/webrtc-quic/
• RTCQuicStream
  • https://w3c.github.io/webrtc-quic/cs.html
• RTCIceTransport
  • https://w3c.github.io/webrtc-ice

これらが本家の仕様ですが、今回実装されてるのはその一部分 + 微妙に違うAPIたち。

GitHub - shampson/RTCQuicTransport-Origin-Trial-Documentation: Documentation and demos for developers using the RTCQuicTransport in Chrome's origin trial.

ここに載ってるのがすべてであり、それが`googRTCQuicTransport`では？とか揶揄される理由。

コード例も、OriginTrial開始の記事にさらっと書いてあるくらいで、全然ありません＼(^o^)／

WebRTCHacksのこの記事のほうが詳しいくらい。

First steps with QUIC DataChannels - webrtcHacks

まぁそんな中でとりあえず動くものを作ったので、とりあえず学びをブログにしとくかーというモチベーションです。

まずはそれぞれのクラスについて書いていきます。

RTCIceTransport

何より先にまずICE。

const ice = new RTCIceTransport();

// 従来のWebRTCと同じ
ice.addEventListener('icecandidate', ev => {
  if (ev.candidate === null) {
    // gathering done
  }
});
// candidateを集める
ice.gather({
  gatherPolicy: 'all',
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
});

// シグナリングで相手に渡したいものを互いに送りあう
const candidates = ice.getLocalCandidates();
const params = ice.getLocalParameters();

// 相手から受け取ったやつを渡す
for (const candidate of candidates) {
  ice.addRemoteCandidate(candidate);
}
// type iceRole = 'controlling' | 'controlled';
ice.start(params, iceRole);

// つながるのを待つ
ice.addEventListener('statechange', ev => {
  if (ev.target.state === 'connected') {
    // ...
  }
});

• 紹介記事のコード例では`RTCQuicTransport`ごっちゃに扱われてるけど、独立して使える
• 見つかった経路はその都度送って`addRemoteCandidate()`してもいいし
• 上のコードにあるようにまとめてやってもいい
• `start()`と`addRemoteCandidate()`の順番もどっちが先でもいい
• `getLocalXxx()`があるように、`getRemoteXxx()`も生えてる
• 経路が決まったら、`getSelectedCandidatePair()`で組み合わせが取れるようになる

さよならSDP。
ORTCのソレとも違うけど、シンプルなので使い方にも特別迷うことはないはず。

RTCQuicTransport

ICEがつながったら次にQUICをつなげる。

// 独立して使えるけど、引数で渡す必要がある
const quic = new RTCQuicTransport(ice);

// これを相手に渡して待つ
const key = quic.getKey();
quic.connect();

// 受け取った側
quic.listen(key);

// つながるのを待つ
quic.addEventListener('statechange', ev => {
  if (ev.target.state === 'connected') {
    // ...
  }
});

• QUIC用語では、クライアントとサーバーに概念が分かれるらしい
  • `connect()`する側がクライアント
  • `listen(key)`する側がサーバー
• 使ったことないけど、`getStats()`も生えてる
• QUICのコネクションを張れば、その中でストリームがN本作れる

// from https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
export function ab2str(buf) {
  return String.fromCharCode.apply(null, new Uint16Array(buf));
}

export function str2ab(str) {
  const buf = new ArrayBuffer(str.length * 2); // 2 bytes for each char
  const bufView = new Uint16Array(buf);
  for (let i = 0, strLen = str.length; i < strLen; i++) {
    bufView[i] = str.charCodeAt(i);
  }
  return buf;
}

これを踏まえて

従来のAPIはこのへんの処理を`RTCPeerConnection`がやってくれてたけど、そのレイヤーはまだ実装されてない。

なので、自作したのがこのファイル。

https://github.com/leader22/rtcquic-chat-example/blob/master/src/chat-app/quic-peer-connection.js

という具合で、単にQUICをつなげるだけなら割と簡単にできる。

問題はここから・・・！

QuicStream

個人的に一番やりづらかったのがこいつ。

WriteとReadをそれぞれ細かく見ていく。

const quicStream = quic.createStream();

// 書き込み
quicStream.write({
  // Uint8Arrayのみ
  data: new TextEncoder().encode('Hello, quic!'),
  finish: false,
});

quic.addEventListener('quicstream', async ev => {
  const quicStream = ev.stream;

  // 最初に読み出し可能になるまで待つ
  await quicStream.waitForReadable(1);
  _readData(quicStream);
});

async function _readData(quicStream) {
  // 今読み出せる分だけ全部読む
  const buffer = new Uint8Array(quicStream.readBufferedAmount);
  quicStream.readInto(buffer);

  // stringならデコードできる
  const message = this.decoder.decode(buffer);

  // ...

  // 次の書き込みを待つ
  await quicStream.waitForReadable(1);
  this._readData(quicStream);
}

ストリームをどう扱うか

このコード例では、単一のQUICコネクションの上で単一のストリームを張って、その中で全部やってる。

ただやり方としては他にもあって、いわゆるUnreliableな使い方。

その場合は、1メッセージごとに1ストリームを作ればいいだけ。

// write
quicStream.write({
  data: new TextEncoder().encode('Hello, quic!'),
  finish: true, // 毎回終わらせる
});

// read
quic.addEventListener('quicstream', async ev => {
  const quicStream = ev.stream;

  await quicStream.waitForReadable(1);
  const buffer = new Uint8Array(quicStream.readBufferedAmount);
  quicStream.readInto(buffer);

  const message = this.decoder.decode(buffer);

  // ...
});

どっちがいいとかではなく、どっちでもいい。

ただまあだいたいのケースではReliableに使いたいと思うので、1ストリームでやればいいのでは・・と思う。

その他のネタ

• UIは本旨ではないので雑にした
• ReactのHooks試そうかとも思ったけど、`lighterhtml`にした
  • https://github.com/WebReflection/lighterhtml
  • `hyperHTML`の後継で相変わらずシュッとしてる
• Materializeはまぁまぁ便利
• Chromeでしか使わないのでES Modules
  • CDNで公開されてるライブラリまだまだ少ないね

そもそもWebRTCがニッチすぎるのもあってリアクションは期待してないけど、同業の人とか試してみたとか何かあれば、Twitterとかでリプください！