Created
May 16, 2011 18:55
Revisions
-
mixonic revised this gist
May 16, 2011 . 3 changed files with 161 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,3 @@ node_modules public/socket.io.min.js public/jquery.js This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1 +1,82 @@ /** * * Share mouse movement across any number of clients. To run * this app install the following: * * npm install socket.io express * curl -o public/socket.io.min.js https://github.com/LearnBoost/Socket.IO/raw/master/socket.io.min.js * curl -o public/jquery.js http://code.jquery.com/jquery-latest.min.js * * Then start the server: * * node app.js # Use sudo for flash-sockets * * And finally, load it up in a few browsers: * * open http://`hostname`:3000/mousy.html * * This app is built with Express and Socket.io. * */ // Module dependencies. // var express = require('express'), http = require('http'), io = require('socket.io'); var app = module.exports = express.createServer(); // Configuration // app.configure(function(){ // app.set('views', __dirname + '/views'); // app.set('view engine', 'jade'); app.use(express.bodyParser()); app.use(express.methodOverride()); 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('/', function(req, res){ res.send('visit /mousy.html'); }); colors = ['blue', 'green', 'red', 'yellow', 'azure', 'brown', 'cyan', 'lime', 'navy', 'olive']; function get_color(){ return colors.pop(); } io_server = http.createServer(); if (!module.parent) { app.listen(3000); console.log("Express server listening on port %d", app.address().port); io_server.listen(8080); console.log("Socket.io server listening on port %d", io_server.address().port); var listener = io.listen(io_server); listener.on('connection', function(client){ var client = client; client.on('message', function(data){ if (data.color) { listener.broadcast( new Buffer("{ 'event': 'movement', 'color': '"+data.color+"', 'x': "+data.x+", 'y': "+data.y+" }") ); } else if (client.color) { listener.broadcast( new Buffer("{ 'event': 'movement', 'color': '"+client.color+"', 'x': "+data.x+", 'y': "+data.y+" }") ); } else { client.color = get_color(); client.send( new Buffer("{ 'event': 'color', 'color': '"+client.color+"' }") ); } }); }); } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,76 @@ <!doctype html> <html> <head> <script src="/jquery.js"></script> <script src="/socket.io.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> function move(data){ mover = $(document.createElement('div')). addClass('cursor'). css({ 'background-color': data.color, 'left': data.x, 'top': data.y }). html(' '); $(document.body).append( mover ); mover.fadeOut(); } window.my_color=null; function set_color(data) { window.my_color = data.color; } var socket = new io.Socket(null, {rememberTransport: false, port: 8080}); socket.connect(); socket.addEvent('message', function(data) { var data = eval( '('+$.map(data, function(e,i) { return String.fromCharCode(e); }).join('')+')' ); if (data.event) { if (data.event == 'movement') { move( data ); } else if ( data.event == 'color' ) { set_color( data ); } } }); $(function(){ $(document).mousemove(function(it){ socket.send({ event: 'mousemove', x: it.pageX, y: it.pageY, color: (window.my_color ? window.my_color : null) }); }); /* $('form').submit(function(e){ var input = $('input'); socket.send(input.val()); input.val(''); return false; }); $('input').focus(); */ }); </script> <style type="text/css"> body, p, input { font-family: fixed; font-size: 13px; border: none; } p { white-space: pre; } p, form, input { margin:0; padding:0; } input:focus { outline: none; border: none; } div.cursor { height: 2px; width: 2px; position:absolute; } </style> </head> <body> <div></div> </body> </html> -
Matthew Beale created this gist
May 16, 2011 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ Dummy initial checkin. -
May 16, 2011 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,3 @@ node_modules public/socket.io.min.js public/jquery.js This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,82 @@ /** * * Share mouse movement across any number of clients. To run * this app install the following: * * npm install socket.io express * curl -o public/socket.io.min.js https://github.com/LearnBoost/Socket.IO/raw/master/socket.io.min.js * curl -o public/jquery.js http://code.jquery.com/jquery-latest.min.js * * Then start the server: * * node app.js # Use sudo for flash-sockets * * And finally, load it up in a few browsers: * * open http://`hostname`:3000/mousy.html * * This app is built with Express and Socket.io. * */ // Module dependencies. // var express = require('express'), http = require('http'), io = require('socket.io'); var app = module.exports = express.createServer(); // Configuration // app.configure(function(){ // app.set('views', __dirname + '/views'); // app.set('view engine', 'jade'); app.use(express.bodyParser()); app.use(express.methodOverride()); 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('/', function(req, res){ res.send('visit /mousy.html'); }); colors = ['blue', 'green', 'red', 'yellow', 'azure', 'brown', 'cyan', 'lime', 'navy', 'olive']; function get_color(){ return colors.pop(); } io_server = http.createServer(); if (!module.parent) { app.listen(3000); console.log("Express server listening on port %d", app.address().port); io_server.listen(8080); console.log("Socket.io server listening on port %d", io_server.address().port); var listener = io.listen(io_server); listener.on('connection', function(client){ var client = client; client.on('message', function(data){ if (data.color) { listener.broadcast( new Buffer("{ 'event': 'movement', 'color': '"+data.color+"', 'x': "+data.x+", 'y': "+data.y+" }") ); } else if (client.color) { listener.broadcast( new Buffer("{ 'event': 'movement', 'color': '"+client.color+"', 'x': "+data.x+", 'y': "+data.y+" }") ); } else { client.color = get_color(); client.send( new Buffer("{ 'event': 'color', 'color': '"+client.color+"' }") ); } }); }); } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,76 @@ <!doctype html> <html> <head> <script src="/jquery.js"></script> <script src="/socket.io.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> function move(data){ mover = $(document.createElement('div')). addClass('cursor'). css({ 'background-color': data.color, 'left': data.x, 'top': data.y }). html(' '); $(document.body).append( mover ); mover.fadeOut(); } window.my_color=null; function set_color(data) { window.my_color = data.color; } var socket = new io.Socket(null, {rememberTransport: false, port: 8080}); socket.connect(); socket.addEvent('message', function(data) { var data = eval( '('+$.map(data, function(e,i) { return String.fromCharCode(e); }).join('')+')' ); if (data.event) { if (data.event == 'movement') { move( data ); } else if ( data.event == 'color' ) { set_color( data ); } } }); $(function(){ $(document).mousemove(function(it){ socket.send({ event: 'mousemove', x: it.pageX, y: it.pageY, color: (window.my_color ? window.my_color : null) }); }); /* $('form').submit(function(e){ var input = $('input'); socket.send(input.val()); input.val(''); return false; }); $('input').focus(); */ }); </script> <style type="text/css"> body, p, input { font-family: fixed; font-size: 13px; border: none; } p { white-space: pre; } p, form, input { margin:0; padding:0; } input:focus { outline: none; border: none; } div.cursor { height: 2px; width: 2px; position:absolute; } </style> </head> <body> <div></div> </body> </html>
Matthew Beale
created
this gist