mice.css

.mouse, #preview{
  position: absolute;
  background-repeat: no-repeat;
  height: 22px;
  min-width: 15px;
  z-index: 100;
}

.mouse{
  background-image: url('../images/cursor.png');
}

span.chat{
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  background-color:#222;
  box-shadow:0 1px 0 #fff;
  color:#fff;
  font-size: 12px;
  margin: 0 0 0 15px;
  display: block;
  opacity: 0.75;
  font-size: 12px;
  line-height: 16px;
  padding: 2px 5px;
  float:right;
}

span.mouse img, span#preview img{
  padding: 0 5px;
  float:left;
  margin: 0 -15px 0 15px;
  width: 20px;
  height: 20px;
}


form
{  
  margin: 0px 0px 0px -10px;
  width:470px;
}

form#chat input{
  width: 185px;
  border:0;
  padding:10px;
  margin:10px;
  -moz-border-radius:5px;
  -moz-box-shadow:0 1px 0 #fff;
  -webkit-border-radius:5px;
  -webkit-box-shadow:0 1px 0 #fff;
  border: 5px #bbb solid;
  
}

mice.js

io.setPath('/js/socket/');

function ratelimit(fn, ms) {
  var last = (new Date()).getTime();
  return (function() {
    var now = (new Date()).getTime();
    if (now - last > ms) {
      last = now;
      fn.apply(null, arguments);
    }
  });
}

function move(mouse){
  if(disabled == false){                               
    if($('#mouse_'+mouse['id']).length == 0) {
      $('body').append('<span class="mouse" id="mouse_'+mouse['id']+'"><span style="display:none;" class="chat"/></span>');
    }
    $('#mouse_'+mouse['id']).css({
      'left' : (($(window).width() - mouse['w']) / 2 + mouse['x']) + 'px',
      'top' : mouse['y'] + 'px'
    })
  }
};

function speak(data){
  clearTimeout(timeouts[data['id']]);
  $('#mouse_'+data['id']+' img').remove();
  $('#mouse_'+data['id']).append('<img src="http://www.gravatar.com/avatar/' + data['email'] + '?s=20" />');

  if(data['text'] == '') {
    return $('#mouse_'+data['id']+' .chat').hide();
  }

  $('#mouse_'+data['id']+' .chat').show().html(data['text']);
  timeouts[data['id']] = setTimeout("$('#mouse_"+data['id']+" .chat').hide()", 5000)
};

function preview(data){
  clearTimeout(timeouts[data['preview']]);
  $('#preview img').remove();
  $('#preview').append('<img src="http://www.gravatar.com/avatar/' + data['email'] + '?s=20" />');

  if(data['text'] == '') {
    return $('#preview .chat').hide();
  }

  $('#preview').show();
  $('#preview .chat').show().html(data['text']);
  timeouts['preview'] = setTimeout("$('#preview').hide()", 5000)
};

$(document).ready(function(){
  $('#mouse_toggle a').toggle(function(){
    $('.mouse').hide();
    disabled = true;
    $(this).html('enable');
  }, function(){
    $('.mouse').show();
    disabled = false;
    $(this).html('disable');
  });

  $('form#chat input#email').focus();
  $('form#chat').submit(function(){
    if($('form#chat input#email').val() == '') {
      return alert('You forgot to fill in your e-mail address.');
    }

    socket.send(JSON.stringify({
      action: 'speak',
      email: $('form#chat input#email').val(),
      text: $('form#chat input#text').val().substring(0, 140)
    }));

    email: $('form#chat input#text').val('')
    return false;
  })

  $('body').append('<span id="preview"><span style="display:none;" class="chat"/></span>');
});

$(document).mousemove(
  ratelimit(function(e){
    socket.send(JSON.stringify({
      action: 'move',
      x: e.pageX,
      y: e.pageY,
      w: $(window).width(),
      h: $(window).height()
    }))

    $('#preview').css({
      'left' : e.pageX + 'px',
      'top' : e.pageY + 'px'
    })
  }, 40)
);

var disabled = false,
    socket = new io.Socket('jeffkreeftmeijer.com', {port: 8000}),
    timeouts = {};

if(socket.connect()){
  socket.on('message', function(data){
    data = JSON.parse(data);
    if(data['action'] == 'close'){
      $('#mouse_'+data['id']).remove();
    } else if(data['action'] == 'speak') {
      if(data['id']) {
        speak(data);
      } else {
        preview(data);
      }
    } else if(data['action'] == 'move'){
      move(data);
    };
  });
};

server.js

var sys = require('sys'),
    http = require('http'),
    crypto = require('crypto');
    io = require('../'),
    server = http.createServer(),
    socket = io.listen(server),
    json = JSON.stringify,
    log = sys.puts;

server.listen(8000);

socket.on('connection', function(client){
  client.on('message', function(message){
    try {
      request = JSON.parse(message.replace('<', '&lt;').replace('>', '&gt;'));
    } catch (SyntaxError) {
      log('Invalid JSON:');
      log(message);
      return false;
    }

    if(request.action != 'close' && request.action != 'move' && request.action != 'speak') {
      log('Ivalid request:' + "\n" + message);
      return false;
    }

    if(request.action == 'speak') {
      request.email = crypto.createHash('md5').update(request.email).digest("hex");
      client.send(json(request));
    }
    
    request.id = client.sessionId
    client.broadcast(json(request));
  });

  client.on('disconnect', function(){
    client.broadcast(json({'id': client.sessionId, 'action': 'close'}));
  });
});

Suggestion: pull the cursor image inline
background-image: url('data:image/png;base64,...')

When I use this code I can still see my own pointer 'drag' a bit behind before it hides behind my mouse. How do you get it to not display your own pointer?

Do you have to have the Node server send you your id so you know which mouse to not display?

I'm intrigued by ratelimit()... If "last" value is calculated right away, then with every mousemove event the "last" will be updated? I'll have to read that a couple times to understand how it maintains the 40ms rate limit.

I apologize if I'm wrong, but I believe it should be "socket.broadcast(...)" as opposed to "client.broadcast(...)" (lines 33 and 37 in server.js).