peerjsにルーム機能と切断検知機能をつける
概要
peerjsを使ってWebRTC実装したときに、FireFoxだとcloseイベントが通知されなかったので1meetingのjsを参考に、ルーム管理と切断検知を作ってみた。
コード
サーバ
クライアント
ルーム情報送信
- 最初の接続時に接続ルーム名を送る
- ページ遷移なしでルームをうつることは考えない
クライアント
- アクセスパラメータにルーム名を入れる
added room name · kambayashia/peerjs@0717e2c · GitHub
サーバ
- ルーム名を受け取ってルームごとのリストに分ける
added room list · kambayashia/peerjs-server@0187de5 · GitHub
ルームメンバー取得
- ルームメンバー一覧を返すアクションを作る
クライアント
- ルーム取得時に再度ルーム名送ってるのが気になるけどいったんしょうがない。
added getter of room-member · kambayashia/peerjs@ded674a · GitHub
サーバ
- id一覧をarrayで返す
added handler · kambayashia/peerjs-server@c800802 · GitHub
使い方
- OPENイベントのpayloadに乗っけて返そうとしたけど、自身のMediaStreamが必要だったのでgetUserMedia()のコールバック内で呼ぶようにした。
var peer; //Peerオブジェクト
navigator.getUserMedia({audio: true, video: true}, function(stream){
peer.listRoomMemberPeers(function (response) {
for(var i in response) {
var id = response[i];
if (id != peer.id) { // 自分自身のも含んでるので弾く
peer.call(id, stream);
}
}
});
});
切断通知
- 切断した際に相手にLEAVEイベントが行っていなかったので、飛ばすようにした。
クライアント
- 変更なし
サーバ
- removePeer()が呼ばれたら内部で同一ルームのメンバーにLEAVEを投げる
send leave event to room members · kambayashia/peerjs-server@dfb8a63 · GitHub
まとめ
元の実装みると次にpeerjs−server経由で通信しようとしたときに切断されていたらLEAVEイベント投げるっぽいけど、定期的に投げられるものじゃないっぽいので自分で投げるようにした。 FireFoxでは相手の切断イベントがこない問題はいったんこれで解決した。 他の方法がどんなのがあるかわからないけど、1meetingも独自イベント実装してたしまあいいかなと。
あと、動画部分はさておき、テキストチャットその他の操作をルームごとのアーカイブとして残したいので、WebRTCのデータチャンネルを使わずに、サーバクライアント方式でチャットやり取りする機能をpeerjsにつける魔改造をする予定。 １つのページで複数WebSocket作って、別サーバに接続に行くのがスマートなのかよくわからない。
