Created
July 24, 2010 09:18
-
-
Save jeffkreeftmeijer/488562 to your computer and use it in GitHub Desktop.
This file contains 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 characters
.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; | |
} |
This file contains 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 characters
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); | |
}; | |
}); | |
}; | |
This file contains 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 characters
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('<', '<').replace('>', '>')); | |
} 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'})); | |
}); | |
}); |
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
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.