Node.js+WebSocketの環境を利用し、サーバーから現在時刻を表示する、ということをやってみました。
というわけで、その実験結果をまとめます。
当然ながら、これだけでしたらクライアント側で全て実装した方が良いですが、今回はより判りやすくシンプルに、ということで。
また、WebSocketの醍醐味（？）は双方向通信ですが、今回はサーバー→クライアント方向のみにします。
双方向通信はまたいずれ書きます。
なお、私が試したのはLAN内での表示のみです。
サーバーにアップロードして、ということは試していないので、その場合もしかしたら何か別な設定が必要になるかもしれません。
あと、今回はNode.jsやSocket.IOのインストールなどは省かせていただきます。
サーバー側のJS
とりあえずコードを以下に記述します。
// １）モジュール読み込み
var fs = require("fs");
var http = require("http");
var socketio = require("socket.io");
// ２）サーバー構築
var server = http.createServer( function( req, res ) {
res.writeHead( 200, { "Content-Type": "text/html" } );
var output = fs.readFileSync( "index.html", "utf-8" );
res.end( output );
}).listen( 3000 );
var io = socketio.listen( server );
// ３）サーバーからのデータ送信
io.sockets.on( "connection", function ( socket ) {
// 最初の表示
io.sockets.emit( "sendClock", getNow() );
// 1秒ごとに時計を更新
setInterval( function() {
io.sockets.emit( "sendClock", getNow() );
}, 1000);
});
// 現在時刻の文字列を生成
function getNow() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
return ('0'+hour).slice(-2) + ":" + ('0'+minute).slice(-2) + ":" + ('0'+second).slice(-2);
};これを、名称は「clock.js」など適切なものにして保存します。
保存場所も、ターミナルから「node clock.js」というように実行ができればどこでも良いです。
さて、コードについてですが、WebSocketに直接関わる部分は、大きく以下の3パートに分かれています。
１）モジュール読み込み
２）サーバー構築
３）サーバーからのデータ送信
「１）モジュール読み込み」の「fs」は記述方法によっては必須ではないです。
ページを「index.html」にまとめてしまった方が作りやすいので、使った方が良いと思います。
それを実際に使っているのは「２）サーバー構築」内です。
「fs.readFileSync( “index.html”, “utf-8” );」で読み込んで出力するだけです。
ページにデータを送信するのは「３）サーバーからのデータ送信」の中で、「io.sockets.emit」を使っている部分です。
これの第一引数「sendClock」をキーにして、index.html側でそれを受け取って処理します。
クライアントのHTML
これも、まずはコードを記述します。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>WebSocket Clock</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div id="clock" style="margin:50px;font-size:40px;text-align:center;"></div>
<script type="text/javascript">
var s = io.connect();
s.on( "sendClock", function ( data ) {
$("#clock").html( data );
});
</script>
</body>
</html>難しいことはあまりしていないと思います。
WebSocketで必要な記述は、header内で「socket.io.js」を読み込むのと、「var s = io.connect();」から始まる4行だけです。
「s.on( “sendClock”, 」というように、サーバーのJSでキーにしたものをここで受け取って処理しています。
双方向通信もいずれ
最初にも記述しましたが、今回は判りやすさのためにサーバーからの送信のみにしました。
これだけだったらかなり簡単だと思います。
なので、説明も簡単にさせていただきました。
Node.jsなどの環境を構築してあれば、上記コードをコピーペーストして動く・・・はずです。
ご質問等がもしありましたら、お気軽にコメントで。
