socket.ioでマウスの動きを共有してみよう

自分のマウスの動きが他の人のブラウザにリアルタイムで表示されたら面白いことできそうです。socket.ioを使って、ブラウザから取得したマウスの位置情報を他のブラウザにブロードキャストしてみます。

$ express mouse_share
$ cd mouse_share && npm install
jade@0.20.0 ./node_modules/jade 
├── mkdirp@0.3.0
└── commander@0.2.1
express@2.5.5 ./node_modules/express 
├── qs@0.4.0
├── mkdirp@0.0.7
├── mime@1.2.4
└── connect@1.8.5
$ npm install socket.io
socket.io@0.8.7 ./node_modules/socket.io 
├── policyfile@0.0.4
├── redis@0.6.7
└── socket.io-client@0.8.7

app.js

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')

var app = module.exports = express.createServer();

var io = require('socket.io').listen(app);
io.set('log level', 1);

// Configuration

app.configure(function(){
  app.set('views', __dirname   '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(require('stylus').middleware({ src: __dirname   '/public' }));
  app.use(app.router);
  app.use(express.static(__dirname   '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});
    
// Routes
    
app.get('/', routes.index);
    
app.listen(3000);
            
io.sockets.on('connection', function(socket) {
    socket.on('mousemove', function(mouse) {
        socket.broadcast.json.send({x:mouse.x, y:mouse.y});
    });             
});                 
                    
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

views/layout.jade

!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' ,type='text/javascript')
    script(src='/socket.io/socket.io.js' ,type='text/javascript')
    script(type='text/javascript')
        $(document).ready(function() {
            var socket = io.connect('http://localhost:3000/');
            socket.on('message', function(mouse) {
                $('#point').css({
                    'position':'fixed',
                    'width':'8px',
                    'height':'8px',
                    'background-color':'#f00',
                    'border-radius':'8px',
                    'left':mouse.x,
                    'top':mouse.y,
                });
            });
            $(document).mousemove(function(event) {
                socket.emit('mousemove', {x:event.pageX, y:event.pageY});
            });
        });
  body!= body

実行ー。

$ node app.js

実行結果

ブラウザをSafariとChromeで別々のセッションになるように開いて並べます（Chromeのシークレットウィンドウと普通のウィンドウを並べても可）。片方のブラウザ上でマウスを動かすと、もう片方のブラウザの赤丸ポインタが動きます。

カクカクです。

カクカクを減らすには、サーバからの再送をやめてみます。sendの前にvolatileをつけます。

io.sockets.on('connection', function(socket) {
    socket.on('mousemove', function(mouse) {
        socket.broadcast.json.volatile.send({x:mouse.x, y:mouse.y});
    });             
});                 

さっきよりもスムーズに動きます。

超楽しい！