お手軽にskywayでリアルタイムルームチャットが作れたよ
どうも、現在人工知能君に学習させている間暇なので、なんとなくリアルタイムのテキストチャットを作ってみました。…作ってみたといってもほとんどサンプルの流用なんですけどね。今回は、javascriptとSkyWayというNTTが提供してくれているWebRTCを簡単に扱うことができるようになるプラットフォームを使っていきます。SkyWayのサイトを見るとビデオチャットや音声チャットなども簡単に実装することができるようになるみたいですが、今回はテキストチャットだけを作っていきます。
Contents
1. 下準備
SkyWayを使うには、まず会員登録が必要です。といっても登録料や使用料はかかりません。ちなみに、SkyWayは現在ベータ版みたいなので今後、製品版が出た際は有料になるかもしれないので注意です。
登録は公式サイトから行うことができます。登録には、普通のWebサービスと同じようにメールアドレスと好きなパスワードを入れれば大丈夫です。登録画面の最後には「SkyWayを利用するドメイン」という項目がありますが、今回はローカルのテスト環境で使用するだけなので、「localhost」と入力すれば大丈夫です。
登録が完了すると、API一覧という項目内にAPIキーが発行されているので、どこかにメモしておいてください。後に出てくるプログラム内でこれを書き込みます。
2. プログラムを書いてみる
では、実際にチャットのプログラムを書いていきます。ですが、最低限書く必要があるのはHTMLとjavascriptですが、これらを合わせても数十行です。なんとも便利なものができたものですね。で、実際に書いたものが以下のようになります。まずは、SkyWayのMultipartyインスタンスを作成、通信処理を記述するjavascriptです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
var name_list = {}; var myPeer_id = ''; // MultiParty インスタンスを生成 multiparty = new MultiParty({ "key": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", /* SkyWay keyを指定 */ "reliable": true, "room": room_name, }); // 自分とSkyWayとのコネクションが確立した時に呼ばれる multiparty.on("open", function(myid) { myPeer_id = myid; }); // multipartyのコネクションのセットアップが終了した際 multiparty.on("dc_open", function(peer_id) { send_my_name(peer_id); }); function send_my_name(peer_id) { var name = $("input[name='n']").val(); multiparty.send({state:'name', m:name}, peer_id); } // 通信を終了した時 multiparty.on('dc_close', function(peer_id){ $("#message").append("<div class='message system_message'>"+ name_list[peer_id] +"さんが退室しました。</div>"); delete name_list[peer_id]; // 終了したユーザのネーム情報を削除する display_name_list(); }); //テキストを入力し、submitしたとき $("form").on("submit", function(ev) { ev.preventDefault(); //デフォルトの処理を停止 var $input = $(this).find("input[name='m']"); //テキストを取得 var data = $input.val(); $input.val(""); //テキストを表示 $("#message").append("<div class='message'>"+ data +"</div>"); //peerにメッセージを送信 multiparty.send({state:'test', m:data}); }); // peerからテキストメッセージを受信したとき multiparty.on('message', function(msg) { if(msg.data.state === 'name') { if(!(msg.id in name_list)) { name_list[msg.id] = msg.data.m; $("#message").append("<div class='message system_message'>"+ name_list[msg.id] +"さんが入室しました。</div>"); send_my_name(msg.id); } display_name_list(); } else { $("#message").append("<div class='message'>"+ name_list[msg.id] +" : "+ msg.data.m +"</div>"); } }); // サーバとpeerに接続 multiparty.start(); |
コード上部の「xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx」の部分をご自身のキーに入れ替えてください。続いてチャット画面本体になるhtmlです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!doctype html> <html> <head> <meta charset="utf-8" /> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://skyway.io/dist/0.3/peer.min.js"></script> <script src="./lib/multiparty/multiparty.js"></script> </head> <body lang="ja"> <div> <div id="message"></div> <form> <input type="text" name="n" value="<!-- ここにPHPなんかでユーザ名を出力するといい感じ -->"/> <input type="text" name="m"/> <button type="submit">send</button> </form> <ul id="name_list"></ul> </div> <script> var room_name = '<!-- ここにPHPなんかで部屋IDを出力するといい感じ -->'; </script> <script type="text/javascript" src="./js/chat.js"></script> </body> </html> |
ここまで記事を書いていて思ったのですが、今回掲載したコードは、javascriptとHTMLの単純なものから少し手を加えていました…。ここで掲載したコードでもテキストチャットは動作しますが、ユーザ名や部屋割りの機能を使おうと思ったらPHPなどもう少し工夫する必要があります。
おわりに
本当ならもっと単純なものを掲載したかったのですが、すでにコードは消滅していました…。Gitでも何でも登録しておけという話ですが、単純に忘れていました。現在は、SkyWayを使ってとあるサービスを開発しています。楽しみに待っていてくださいね。