Skip to content

Instantly share code, notes, and snippets.

@yosiat

yosiat/app.js

Created January 12, 2013 14:54
Show Gist options
  • Save yosiat/4518384 to your computer and use it in GitHub Desktop.
Save yosiat/4518384 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
// When the document is ready to be manipulated..
$(document).ready(function(){
// connect to sokcet io
var socket = io.connect('http://localhost:1337');
var $box = $("#box");
$box.draggable({
drag: function(){
socket.emit("box_moved", {
offsetTop : this.offsetTop,
offsetLeft : this.offsetLeft
});
}
});
socket.on("box_moved", function(coordinates){
console.log(coordinates);
$box.css({
left: coordinates.offsetLeft,
top: coordinates.offsetTop || 0,
});
});
});
Raw
index.html
<html>
<head>
<title></title>
<style type="text/css">
div#box {
width: 250px;
height: 250px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="http://localhost:1337/socket.io/socket.io.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Raw
server.js
var io = require('socket.io').listen(1337);
io.sockets.on('connection', function (socket) {
socket.on('box_moved', function(coordinates){
socket.broadcast.emit('box_moved', coordinates);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment