mixonic · May 16, 2011 18:55
diff --git a/.gitignore b/.gitignore
 node_modules
 public/socket.io.min.js
 public/jquery.js
diff --git a/app.js b/app.js
 /**
 *
 * 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+"' }") );
      }
   });
  });
 }
diff --git a/mousy.html b/mousy.html
 <!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('&nbsp;');
        $(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>
	/**
	*
	* 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+"' }") );
	}
	});
	});
	}
	<!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>