Node.js+WebSocketの実験をしてみました

Node.js+WebSocketの環境を利用し、サーバーから現在時刻を表示する、ということをやってみました。

というわけで、その実験結果をまとめます。

当然ながら、これだけでしたらクライアント側で全て実装した方が良いですが、今回はより判りやすくシンプルに、ということで。

また、WebSocketの醍醐味(?)は双方向通信ですが、今回はサーバー→クライアント方向のみにします。

双方向通信はまたいずれ書きます。

なお、私が試したのはLAN内での表示のみです。

サーバーにアップロードして、ということは試していないので、その場合もしかしたら何か別な設定が必要になるかもしれません。

あと、今回はNode.jsやSocket.IOのインストールなどは省かせていただきます。

サーバー側のJS

とりあえずコードを以下に記述します。

// 1)モジュール読み込み
var fs = require("fs");
var http = require("http");
var socketio = require("socket.io");

// 2)サーバー構築
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 );

// 3)サーバーからのデータ送信
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パートに分かれています。

1)モジュール読み込み
2)サーバー構築
3)サーバーからのデータ送信

「1)モジュール読み込み」の「fs」は記述方法によっては必須ではないです。

ページを「index.html」にまとめてしまった方が作りやすいので、使った方が良いと思います。

それを実際に使っているのは「2)サーバー構築」内です。

「fs.readFileSync( “index.html”, “utf-8” );」で読み込んで出力するだけです。

ページにデータを送信するのは「3)サーバーからのデータ送信」の中で、「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などの環境を構築してあれば、上記コードをコピーペーストして動く・・・はずです。

ご質問等がもしありましたら、お気軽にコメントで。

スポンサードリンク

twitterまたはFacebookでもコメントして頂けます