ホームに戻る
Node.js と JavaScriptクライアントで WebSocket通信
０、はじめに
まずそれぞれに何ができるか？を書きます。
Node.js は JavaScript で記述できるサーバーです。
linux に nodejs をインストールし、
nodejs server.js
とすると起動できます。
JavaScript は言うまでもありませんが、
ブラウザ上で動的な処理を行うときに使用します。
WebSocket は TCP/IP 上のプロトコルで、
Node.jsサーバー と JavaScriptクライアントで通信を可能にします。
これらを組み合わせることによって、
Ｗｅｂサービスやオンラインゲームなどに利用できます。
今回作ったサンプルはクラアントからの送信をサーバーが受け、
サーバーがクライアントに結果を返し結果をクライアントが表示します。
複数のブラウザからクライアントを起動し、
サーバーの表示やクライアントの表示を読むと、
挙動がよくわかると思います。
１、Node.js の準備
まず linux で node.js をインストールします。
apt-get などでインストールできると思います。
インストールするときの名前は、
node.js では無く nodejs なので注意します。
（場合によっては nodejs で無く node の場合もあるようです。）
nodejs -v
でバージョンが表示されればインストール完了です。
例えば、下のようなコードを書いて、
nodejs Sample.js
としてサーバーを起動し http://127.0.0.1:8080/ にアクセスすれば、
「Hello World!」がブラウザに表示されるはずです。
（ＩＰアドレスとポート番号は必要に応じて書き換えてください。）
// Sample.js
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World!\n');
}).listen(8080, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8080/');
２、JavaScript の準備
JavaScript はほとんどのブラウザで標準で使用できます。
特に何かを準備するということはありません。
３、WebSocket の準備
WebSocket は npm を使ってインストールします。
npm は apt-get などでインストールできると思います。
npm は node.js のパッケージの管理を行います。
まず、npm をインストールしたら、
npm install socket.io
として WebSocket をインストールします。
４、通信の基礎
通信する際には、
ＩＰアドレスとポート番号が必要です。
ＩＰアドレスはＰＣごとに割り振られています。
ポート番号はそれぞれのＰＣで共通でなければいけません。
linux の場合、ifconfig で調べることができます。
Windows の場合、コマンドラインから ipconfig で調べることができます。
ping *.*.*.*
などとすると通信が確立されているか調べることができます。
(*.*.*.* は相手のＩＰアドレス。)
５、JSON について
JSON は JavaScript のオブジェクトを文字列に変換します。
JavaScript はオブジェクトを、
var obj = {text:'abc', num:123};
などと書きますがこのままのデータを飛ばせません、
よって JSON と呼ばれるフォーマットに置き換えます。
var data = JSON.stringify(obj);
とするとオブジェクトを文字列に変換します。
逆に、
var obj = JSON.parse(data);
とするとオブジェクトに変換します。
６、Node.js サーバー
接続順に番号を割り振ります。
クライアントから受信したデータは、
すべてクライアントに返します。
// Node.js サーバー のサンプル
// ポート番号は 8080 になっています。
var ws = require('websocket.io');
var server = ws.listen(8080, function(){
console.log('Server is running.');
});
var n = 0;
server.on('connection', function(socket) {
socket.on('message', function(data) {
var data = JSON.parse(data);
if(data.type == 'open'){
n = n + 1;
data.num = n;
}
data = JSON.stringify(data);
console.log('\033[96m' + data + '\033[39m');
for(var i = 0; i < server.clients.length; i++){
server.clients[i].send(data);
}
});
});
７、JavaScriptクライアント
JavaScript は HTML に埋め込みです。
jQuery を使用しています。
ＩＰアドレスとポート番号を書き換えて使用してください。
フォームに文字を書いて send ボタンを押すと送信です。
受信した結果はフォームの上のテキストです。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(function(){
var n = 0;
var host = "ws://127.0.0.1:8080/";
var socket = new WebSocket(host);
socket.onopen = function(){
socket.send(JSON.stringify({
type: 'open',
num: n
}));
}
socket.onmessage = function(message){
var data = JSON.parse(message.data);
if(data.type == 'open' && n == 0){
n = data.num;
}
document.getElementById('r_data').innerHTML = n + ":" + data.type;
}
socket.onclose = function(){
socket.send(JSON.stringify({
type: 'close',
num: n
}));
}
$(window).unload(function() {
socket.onclose();
})
$("#sendButton").on("click",function(){
message = $("#message").val()
socket.send(JSON.stringify({
type: 'send' + ' (' + n + ':' + message + ')',
num: n
}));
});
})
</script>
</head>
<body>
<h1><font id="r_data">open error</font></h1>
<input type="text" id="message"/><button id="sendButton">send</button>
</body>
</html>
