socket.io を少し触ってみた

といっても socket.io のサンプルをちょっといじっただけ。
接続したそれぞれのユーザーのマウスポインタにHTMLオブジェクトを追従させ、座標をサーバーに送信。
画面には他に接続したユーザーのオブジェクトも表示されてて、そのユーザーがマウスを動かせばオブジェクトも動くというもの。

サーバーサイド

var http = require('http'), 
		url = require('url'),
		fs = require('fs'),
		io = require('../socket.io-node'),
		sys = require('sys'),
		
server = http.createServer(function(req, res){
	// your normal server code
	var path = url.parse(req.url).pathname;
	switch (path){
		case '/':
			res.writeHead(200, {'Content-Type': 'text/html'});
			res.write('<h1>Welcome. Try the <a href="/moveobj.html">moveobj</a> example.</h1>');
			res.end();
			break;
			
		case '/json.js':
		case '/moveobj.html':
			fs.readFile(__dirname + path, function(err, data){
				if (err) return send404(res);
				res.writeHead(200, {'Content-Type': path == 'json.js' ? 'text/javascript' : 'text/html'})
				res.write(data, 'utf8');
				res.end();
			});
			break;
			
		default: send404(res);
	}
}),

send404 = function(res){
	res.writeHead(404);
	res.write('404');
	res.end();
};

server.listen(8080);
		
var io = io.listen(server),
		buffer = [];
		
io.on('connection', function(client){
	client.send({
		id: client.sessionId,
		isMyObj: true
	});
	
	client.on('message', function(message){
		var offset = message.split(',');
		client.broadcast({
			id: client.sessionId,
			top: offset[0],
			left: offset[1],
			isMyObj: false
		});
	});

	client.on('disconnect', function(){
		client.broadcast({ announcement: client.sessionId + ' disconnected' });
	});
});

クライアントサイド

      function send(user, top, left){
	    move(user, top, left);
        socket.send(top + "," + left);
      };
	  
	  function create(id){
	    var div = document.getElementById(id);
		if(!div){
			div = document.createElement('div');
			div.setAttribute('id', id);
			div.setAttribute('class', 'userObj');
			document.body.appendChild(div);
		}
		return div;
	  };
	  
	  function move(obj, top, left){
		obj.style.top = top + "px";
		obj.style.left = left + "px";
	  };
	  
	  var User = function(id){
	    this.id = id;
		this.obj = create(this.id);
		this.obj.setAttribute('id', 'myObj');
		this.delay = 500;
		this.moveTime = 0;
		
		this.attachEvent = function(){
		  var that = this;
		  document.addEventListener('mousemove', function(e){
		    var time = (new Date).getTime();
			if(time > that.getTime()){
			  send(that.obj, e.clientY, e.clientX);
			  this.moveTime = time;
			}
		  }, false);
		};
		
		this.getTime = function(){
			return this.moveTime + this.delay;
		};
	  }
	  
      var socket = new io.Socket(null, {port: 8080});
      socket.connect();
      socket.on('message', function(obj){
        if (!obj.isMyObj){
		  move(create(obj.id), obj.top, obj.left);
        } else if(!document.getElementById('myObj')){
		  new User(obj.id).attachEvent();
		}
      });

一応mousemove中でも500ミリ秒は待つようにしてます。これだとカクカク。（というか待ち時間なくてもカクカクだけど。
まぁ正直なところこれの使い道はないですが、node.js＋socket.ioでブラウザゲー作りたいなーと漠然と考えてるのでその足がかりとして。
でも普通のウェブアプリケーションとどうやってnode.jsを連携させるのかまだ分からない。

ちょこっとTwitterで見たんですが、GAEでもnodeを動かせるそうですね。（Rihnoに組み込む形って言ってたかな）

実際動かす場合どこがいいのかはまたおいおい調べるとして、とりあえずもっとローカルでいろいろ試そうと思います。