自分のマウスの動きが他の人のブラウザにリアルタイムで表示されたら面白いことできそうです。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}); }); });
さっきよりもスムーズに動きます。
超楽しい!
0 件のコメント:
コメントを投稿