現在、サーバー側で動作するするJavaScript「Node.js」を勉強中。
練習でリアルタイムで会話ができるチャットシステム（WebRTC）を実装。
今回はとりあず実装しただけですので、npmでインストールしたモジュールがどのような役割を果たしているかは把握していません。
Node.jsとその他を準備する
WebRTCに必要なものはNode.jsと以下の3つです。
Linuxサーバーで実装していきますので、npmを使って全てパッケージをインストールします。
npm install socket.io
npm install express
npm install foreverNode.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を実装します。
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でメッセージをサーバ側に送ります。
<!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クライアントを閉じたら停止してしまします。
node chat.jsそこで、永続的に実行する場合はforeverを使います。
forever start chat.js完成したWebRTCは、以下のようにポート3000で開きます。
http(s)://[example.com]:3000WebRTCの完成イメージ
このように、同じWebRTCの画面を開いたユーザー同士が入力したメッセージは、お互い同じメッセージが表示されます。
- Original:https://minory.org/node-js-webrtc.html
- Source:Minory
- Author:管理者
Amazonベストセラー
Now loading...