最小構成でSocket.IOを試すサンプル

2012/10/04 00:53:26

Nodeの勉強の足がかりとして、ぜひとも一緒に使いたいSocket.IOを勉強中。

Websocketの存在は知ってるものの、実際に何ができそうとかアイデアレベルに達するほどの知識はなかったんですよね。
というわけで、まずは最小構成からどんなものかをチェックチェック。

準備

Nodeはインストール済という前提で。

mkdir socketio && cd socketio
npm install socket.io

touch index.html app.js

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello SocketIO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no">
</head>
<body>
<input type="text" id="msg" value="Hello from Client!" />
<button id="send">Send!</button>
<script src="/socket.io/socket.io.js"></script>
<script>
// Client side.
;(function(io, doc){
	var msg = doc.getElementById('msg'),
	sendBtn = doc.getElementById('send');
	sendBtn.addEventListener('click', emit, false);

///////////////////////////////////////////////////////////
// こっからが本題

	var socket = io.connect('http://{NodeをインストールしたサーバーのIPなど}');
	
	socket.on('myFitstRecieving', function (data) {
		console.log(data);
	});

	function emit(){
		socket.emit('myFirstSending', {
			msg: msg.value
		});
	}
}(io, document));
</script>
</body>
</html>

{NodeをインストールしたサーバーのIPなど}ってなってるとこは、ご自身の環境のIP・URLを。

app.js

// Server side.
var app = require('http').createServer(handler),
io = require('socket.io').listen(app),
fs = require('fs');
app.listen(9999);

function handler(req, res) {
	fs.readFile(__dirname + '/index.html', function(err, data) {
		if (err) {
			res.writeHead(500);
			return res.end('Error loading index.html');
		}
		res.writeHead(200);
		res.end(data);
	});
}

///////////////////////////////////////////////////////////
// こっからが本題

io.sockets.on('connection', function(socket) {
	socket.emit('myFitstRecieving', {
		msg: 'Hello from Server!',
		status: 'Connected.'
	});

	socket.on('myFirstSending', function(data) {
		console.log('From client: ' + data.msg);
	});
});

app.listen(9999) ってなってるとこは、ご自身の環境のお好きなポート番号を。

そして起動！

node app.js

emit → on

サーバーからでもクライアントからでも、emitしたものをonするようになってます。
正確にはonで待ち受けてるところにemitかな？

その際、イベント名をきめてやり取りする。
この例でいうところの

// Server side.
socket.on('myFirstSending', function(data) {
	console.log('From client: ' + data.msg);
});

と

// Client side.
socket.emit('myFirstSending', {
	msg: msg.value
});

がセット。

どんな動きになるか

接続した瞬間に、サーバー側から通信があって、クライアント側：ブラウザのコンソールに受信があるはずです。

そして、

ブラウザでSendボタンを連打すると、テキストフィールドの内容がサーバー側のコンソールに流れ込むはず・・！

なんかそれっぽい！

まだ序の口

とはいえThe Websocketっぽい要素はまだまだ先にあります。
broadcastとか、namespaceとか。

それも追って試して記事にするつもりですです。

日本語の記事はまだそんなに多くなかったので、もっと増えるといいなぁ。(例のごとくめっちゃレベル高い記事はあるけど、入門系があまりに少ない)

参考：LearnBoost/socket.io · GitHub