複数のクライアントから送信されたデータを、
サーバー側で集約して、
接続中のクライアントにサーバーで集約した情報を共有するプログラムを書いてみた。
これができるということは、ゲームであれば、
各クライアントの座標をサーバーでまとめて、
クライアントにお互いの位置を共有したりすることができるので、
Node.jsを利用してゲーム等を作るのに役立ちそう。
1. クライアント側
以下の2点を実装する。
1-1. サーバーに情報を送信する処理
1-2. サーバーで集約したデータを受け取った時の処理
client.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>soket.io client</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function() {
var socket = io.connect();
// ----------------------------------------------------------------------
// 1-1. サーバーにメッセージを送信する処理.
// ----------------------------------------------------------------------
$('#sendButton').click(function() {
var sendData = {
message : $('#text').val()
};
socket.emit('saveData', sendData);
});
// ----------------------------------------------------------------------
// 1-2. サーバーで集約している情報を表示する処理.
// ----------------------------------------------------------------------
socket.on('setView', function(dataByServer, serverFunction) {
$('#view').empty().html(dataByServer.messages.join('<br />'));
});
});
</script>
</head>
<body>
<h3>クライアントからのメッセージをサーバーで集約し、クライアントに集約したデータを共有するテスト</h3>
<input id="text" type="text" />
<input id="sendButton" type="button" value="送信" />
<div id="view"></div>
</body>
</html>
2. サーバー側
以下の2点を実装する。
2-1. クライアントが接続された時の初期処理
2-2. クライアントからメッセージを受け取った時に保存して全体に共有する処理
server.js
var fs = require('fs');
var http = require('http');
var server = http.createServer();
server.on('request', function(req, res) {
var stream = fs.createReadStream('./client.html');
res.writeHead(200, {
'Content-Type' : 'text/html'
});
stream.pipe(res);
});
var io = require('socket.io').listen(server);
server.listen(8000);
var MAX_MESSAGES_SIZE = 30;
var data = {messages: []};
io.sockets.on('connection', function(socket) {
// ----------------------------------------------------------------------
// 2-1. クライアントの描画処理を呼ぶ.
// ----------------------------------------------------------------------
socket.emit('setView', data);
// ----------------------------------------------------------------------
// 2-2. クライアントから送信されたメッセージをサーバーにて保存する処理.
// ----------------------------------------------------------------------
socket.on('saveData', function(dataByClient) {
data.messages.unshift(dataByClient.message);
if (data.messages.length > MAX_MESSAGES_SIZE) {
data.messages.splice(data.messages.length - 1);
}
io.sockets.emit('setView', data);
});
});
3. 実行
ターミナルにて node server.js を実行。
ブラウザで http://127.0.0.1:8000/にアクセス。（窓を同時に複数開くと実験しやすい）
テキストボックスに適当な文字列を入力して送信ボタンを押すと、
複数の窓でメッセージが共有されていることが確認できる。