現在、サーバー側で動作するするJavaScript「Node.js」を勉強中。
練習でリアルタイムで会話ができるチャットシステム（WebRTC）を実装。
今回はとりあず実装しただけですので、npmでインストールしたモジュールがどのような役割を果たしているかは把握していません。
Node.jsとその他を準備する
WebRTCに必要なものはNode.jsと以下の3つです。
Linuxサーバーで実装していきますので、npmを使って全てパッケージをインストールします。
|
1 2 3 |
npm install socket.io npm install express npm install forever |
Node.jsのインストール方法はこちらを参考に。
後は、サーバー側で動作させるJavaScriptファイルと、WEBブラウザ側でチャット画面を表示するためのHTMLファイルです。
ここでは、[chat.js]と[index.html]というファイルを作成します。
WebRTCを構築
まず、Linuxサーバー側でWebRTCの要であるチャットのやり取りを処理する[chat.js]を作り、次にチャットの内容を入力したり表示する[index.html]を作成します。
chat.js
ここでは、上記のnpmでインストールしたNode.jsのパッケージ（socket.ioとexpress）を使って、3000番ポートでHTTP接続してWebRTCを実装します。
|
1 2 3 4 5 6 7 8 9 10 11 |
app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http);app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); });io.on('connection', function(socket){ socket.on('chat message', function(msg){ io.emit('chat message', msg); }); });http.listen(3000, function(){ console.log('listening on *:3000'); }); |
index.html
そして、クライアント側（WEBブラウザ）でチャットを入力・表示するための画面を作ります。
ここでは、入力フォームや表示の他に、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 |
<!DOCTYPE html> <html> <head> <title>WebSocket Chat</title> </head> <body> <form action=""> <input id="sendmsg" autocomplete="off" /><button>Send</button> </form> <ul id="messages" style="list-style-type: decimal; font-size: 16px; font-family:: Arial;"></ul> <script src="/socket.io/socket.io.js"></script> <script src="http://code.jquery.com/jquery.min.js"></script> <script> var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#sendmsg').val()); $('#sendmsg').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').append($('<li style="margin-bottom: 5px;">').text(msg)); }); </script> </body> </html> |
さぁ！WebRTCを実行するには以下のコマンドを実行します。
ただし、一時的な実行になりますので、SSHクライアントを閉じたら停止してしまします。
|
1 |
node chat.js |
そこで、永続的に実行する場合はforeverを使います。
|
1 |
forever start chat.js |
完成したWebRTCは、以下のようにポート3000で開きます。
|
1 |
http(s)://[example.com]:3000 |
WebRTCの完成イメージ
このように、同じWebRTCの画面を開いたユーザー同士が入力したメッセージは、お互い同じメッセージが表示されます。
コメント