WebRTCのRTCDataChannel APIを使って、複数人にデータを送信してみる

WebRTCで複数人接続してみるの続きです。

今回は「RTCDataChannel API」を使って、データの送受信を試してみたいと思います。

複数人接続の記事の後なので、複数人に対してデータの送受信までを試してみます。

RTCDataChannel APIとは？

Peerの接続を利用して、データを送受信できる仕組み。

・送受信できるデータ形式
Blob、ArrayBuffer、ArrayBufferViewのようなデータ形式をサポート。

・通信プロトコル
UDP、TCP、SCTPをサポート。

RTCDataChannel APIを使うには？

こんな感じで生成することができます。
DataChannelの接続リクエストをハンドリングする。
これで送信する準備はオッケーです。
下記をconsoleから実行すると端末B側の「dataChannel.onmessage」が動作します。

remoteDataChannel.send("test test");

注意点ですが、Peerでの接続確立後に「peer.createDataChannel」をしても相手側の「peer.ondatachannel」は動作しませんでした。
オファー前に「peer.createDataChannel」をしとくと良いようです。
参考：http://blog.wnotes.net/blog/article/beginning-webrtc-datachannel

前回のソース（WebRTCで複数人接続してみる）を修正してみる

webrtc.jsを修正する
・initの処理を変更（this.dataChannelsとthis.remoteDataChannelsを初期化させる処理追加
・connectの処理を変更（this.option.dataChannelsのif文を追加
・createDataChannelを新規追加
index.htmlを修正する
・createWebrtcInstanceの処理を変更（new するところに、dataChannelsを追加しただけ
追加してるコードは50行ぐらいです。

データ送受信の実行手順

1. WebRTCで複数人接続してみるの「作ってみた」の手順通り実施し、複数人接続をさせておく

2. 全てのブラウザでDeveloper Toolsを開く

3. どれか１つでconsoleから下記を実行する

for (var i in webrtcTest.webRtcInstances) {
  if (i !== webrtcTest.localInstanceKey) {
    webrtcTest.webRtcInstances[i].remoteDataChannels['test channel'].send("test dayo");
  }
}

4. 実行したタブ以外で、下記のようなメッセージがconsole上に流れていることを確認できる

data channel message:test dayo

できた！！

（個別に送信したい場合は、下記を実行する

webrtcTest.webRtcInstances[id].remoteDataChannels['test channel'].send("test dayo");

※ idは送信したい端末のid

終わりに

ここまでやったらWebRTCはお腹いっぱい気味。
つぎは、ファイルの送受信をできるようにするかなあ。。
（チャンクさせるようにするなんて面倒だ。。

まあ、そこまでやるならサービスレベルのものを作るときかなー。

あとは、peer.jsとかライブラリを使ってみるとか。
気が向いたらやります。

参考

・WebRTC data channels
http://www.html5rocks.com/ja/tutorials/webrtc/datachannels/
・WebRTC-DataChannel使ってみたよ
http://blog.wnotes.net/blog/article/beginning-webrtc-datachannel

以上！