Allied ArchitectsAllied ArchitectsEngineer Blog

WebRTCのライブラリ「PeerJS」でP2Pチャットを作ってみる

2013/07/2 JavaScript

開発本部の長野です。
最近は主に社内のインフラや社内向けのツールの開発をしています。

前回まではCSS3+JavaScriptについて書いてきましたが、
最近気になっているWebRTCのライブラリの一つ、「PeerJS」について調べてみたので、その導入から簡単なチャットプログラム作成までを紹介します。

そもそもWebRTCとは、wikipediaによると

WebRTC (Web Real-Time Communication)とはWorld Wide Web Consortium (W3C)が提唱するAPIの定義で、プラグイン無しでブラウザ間の音声通話(英語版)、ビデオチャット(英語版)、P2Pファイル共有(英語版)を可能にする。

とあります。つまりサーバーを介さずにブラウザ間で通信ができる技術のことです。
通信というあたりがWebSocketと似ていますが、詳しく知りたい方はHTML5で情報最適化/視覚化&WebRTCで変わる未来~QCon Tokyo 2013レポート (2/3) – @ITを参照してください。

①PeerJSのアカウント作成

アカウント作成方法は以下のサイトで「Developer – Free」をクリックし、必要情報を入れるだけです。
http://peerjs.com/peerserver#

アカウントを作成すると、APIキーが一つもらえます。
このAPIキーを使うとPeerJS側で用意してくれている仲介サーバーが使えるようになります。

②サンプルプログラムを試す

PeerJSのトップページに、二つのブラウザ間でデータ渡しをするサンプルプログラムが書いてあります。
まずはこれを試してみました。

初めに受ける側を開いてから次に別のタブで送る側を開くと、受ける側に「Hi!」というメッセージが表示されます。

受ける側

受ける側の解説

1行目でpeerのオブジェクトを作成しています。
第1引数には自分のIDを入れます。
このIDを指定することで別のブラウザから接続できる仕組みになっています。
第2引数はPeerJSに登録した時にもらったAPIキーを入れます。
2行目は別のブラウザから接続されたときに呼ばれるイベントハンドラで、
3〜5行目にデータが送られてきた際の処理を書きます。
このサンプルでは送られたデータをreceive_messageというdivタグに吐くようにしています。

送る側

送る側の解説

1行目はID以外受ける側と同じです。
2行目で受ける側のIDを指定して接続を試みています。
このときに「DataConnection」と呼ばれる接続相手と通信を行うためのオブジェクトが帰ってきます。
3行目は接続が成功したときに呼ばれるイベントハンドラです。
4行目でhi!と言うメッセージを送っています。

③チャット用に変更する

上記のサンプルプログラムを双方向でメッセージが行えるように変更してみました。

1つ目のブラウザ

2つ目のブラウザ

解説

まず1つ目と2つ目の違いは「selfId」と「againstId」の中身が逆になっていることと、
二つ目がonload時に一つ目のブラウザに対して接続を行っていること以外はほとんど同じです。

時系列に解説します。

■一つ目のブラウザを開く

①Peerを”ReceiverID”というIDでnewする。

②別のブラウザからの接続を待つ

■二つ目のブラウザを開く

③Peerを”SenderID”というIDを引数でnewする。

④onBodyLoadで”ReceiverID”に接続を試みる。
(このときに第二引数に’binary-utf8’と入れることで日本語も送れるようになります。)
接続が成功したらconnect関数を呼ぶ。
また、このときに一つ目のブラウザのconnect関数も呼ばれる。

⑤両方のブラウザのconnect関数が呼ばれ、引数には接続相手のDataConnectionが入っている。
送信のときに使えるようにグローバル変数にセットし、データ受信用のイベントハンドラを呼ぶ。

⑥送信ボタンを押したときの処理。

以上で完成です。
完全なチャットのシステムにするには
・アクセスするブラウザに応じてIDを変える
・ユーザー名も入力できるようにする
等しなくてはいけませんね。

このWebRTCですが、動画や音声も送受信でき、モバイルでは最新のandroid版chromeで使えます。(要コンフィグ変更)
今後iOSでも使えるようになればP2Pのサービスが増えていろいろ遊べそうですね。

最後にアライドアーキテクツでは、一緒に働いてくれるエンジニアを募集中です。
興味がある方は、こちらの採用サイトからご応募ください。

nagano
  • nagano
  • Webエンジニア
  • サービス開発や社内インフラ等を担当しています。 このブログではJavaScript周りのネタを中心に書いていきたいです。

RELATION ENTRY

Unityを触ってみる3

Unityを触ってみる3

2017/10/11 未分類

はじめに こんにちは。プロダクト開発部兼UGC事業部の長野です。 気づけば3年半振りの投稿です。 本業ではphpやJavaScriptを触っていますが、このブログでは引き続きunityネタで行きます。 今回はunityに今流行のDeepLearningを組み合わせたlisというものを使ってみます...

続きを読む

Unity 4.3を触ってみる2

Unity 4.3を触ってみる2

2014/05/8 JavaScript

こんにちは。システム部の長野です。 今回も前回に引き続きUnityネタで行きます。 今流行の鳥を飛ばして障害物を避けていく某人気ゲームのようなものを作ってみました。 (既に出尽くした感満載ですが、、) サンプル ※閲覧するにはUnity Web Playerのインストー...

続きを読む

naganoの記事一覧へ

ページTOPへ