Socket.IO and Complex JSON with Node.js, jQuery
Problem
I'm having a ton of trouble with this. I'm trying to make it so that when I move a square-div, the position of that div is relayed to another page via Socket.IO, so that the div moves in realtime. Only problem is that I don't have a clue how to do this! The documentation over at http://socket.io only confused me.
My jQuery code:
$(document).ready(function() {
$("#mydiv").draggable().mousemove(function(){
var coord = $(this).position();
$("#left").val(coord.left);
$("#top").val(coord.top);
});
});
html:
X:
Y:
I don't even know where to start with socket.io, please help!
Thank you very much!
Solution
Socket.IO consists of two parts:
- A server program that can send and receive data from clients
- A client script that can connect to the Socket.IO server and send and receive data
So, first of all, you need a Server. Here's one that listens on port 8080
and when a client connects, it waits for an receive_position
event from it, and when it gets one, broadcasts that position to all the rest of the connected clients via an update_position
event.
There is also some code to serve an index.htm
file when the root URL (/
) is visited. Most of this code is from the Socket.IO "How to Use" page; if the non-Socket.IO code doesn't make any sense, you may want to brush up on your Node.js fundamentals.
var app = require('http').createServer(handler)
, io = require('socket.io').listen(app)
, fs = require('fs')
app.listen(8080);
function handler (req, res) {
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
var lastPosition = { x: 0, y: 0 }; // whatever default data
io.sockets.on('connection', function (socket) {
socket.emit('update_position', lastPosition);
socket.on('receive_position', function (data) {
lastPosition = data;
socket.broadcast.emit('update_position', data); // send `data` to all other clients
});
});
Now that your server is set up, you need some client-side scripting to send and receive the positions of the div. Put this code in your index.htm
file.
This code sends a receive_position
event when the div is dragged; the server gets this event, and sends an update_position
event with the same x and y values to all other clients; when they receive this data, they update the div.
Hope this helps get you started; let me know in the comments if you have any questions.
Discussion
View additional discussion.