Skip to content

Instantly share code, notes, and snippets.

@jeffkreeftmeijer
Created July 24, 2010 09:18
Show Gist options
  • Save jeffkreeftmeijer/488562 to your computer and use it in GitHub Desktop.
Save jeffkreeftmeijer/488562 to your computer and use it in GitHub Desktop.
.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;
}
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);
};
});
};
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'}));
});
});
@fearphage
Copy link

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

@hernan43
Copy link

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?

@iamah
Copy link

iamah commented Aug 3, 2010

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.

@azlyth
Copy link

azlyth commented May 27, 2011

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment