Multiplayer Server to Person Game - websocket

Question

I am indeed new here, but I have been reading the responses for.. since I've began programming.
I am still new, and absolutely fresh out the womb when it comes to networking. But I'll keep this brief so you can give a conclusive answer.
I have a webserver and a domain name. I would like to use websockets to make an environment in which both players can move at the same time on the same screen. For example, if the mouse controlled a dot, and two people connected to a global "world" then a single person could see the dot of the other person in real time. An example of something like this would be rumpetroll.com.
I don't expect to get a whole lot about how to design a game like RuneScape (although I think that the idea is almost the same). I just want some in-depth explanation of how to get this cool little interaction going.
Any links to how to program to sockets would be GREATLY appreciated, because all I can find on the internet is the concept. Nothing on the mechanics and what each command may do.
Anyway, thanks guys.

Answer 1

You will need a server and a client. I am assuming you know JavaScript, so I will provide an example that uses it on both sides.
The server
You will need nodejs, install it following the instructions on the site.
I will provide examples using socket.io, since you asked for websockets, but keep in mind that there are also other solutions, like Faye, which is worth looking at.
Put yourself in a new folder, run npm install socket.io, this will download the required code for the server; then paste this code in a file named server.js
var io = require('socket.io').listen(8000);
io.sockets.on('connection', function (socket) {
socket.emit('new-connection', { message: 'we have a new user!' });
socket.on('message-from-client', function (data) {
console.log(JSON,stringify(data));
});
});
Start the server by typing node server.js, you should see info - socket.io started in the console.
The client
Paste this code in a file called index.html and open it with your favorite web browser
<script src="http://localhost:8000/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost:8000');
socket.on('new-connection', function (data) {
alert(JSON.stringify(data));
socket.emit('message-from-client', { message: 'hi' });
});
</script>
As soon as you navigate to http://localhost:8000 you will see two things:
an alert greeting you
a message in the console where you started the server
this will happen each time you navigate to that url, try navigating to it with two different browsers or in a incognito / private browsing window. Each time you should see the alert and the message.
This is the basic setup. From here you could complicate things as much as you like to, if you will be using this solution consider passing data around in JSON, as I showed in the examples.
Where to go from here
As you can see it is really easy, if you want to show a dot, that will appear for all users, bind the client mouse movements to a function that will send the position to the server and have it broadcast to all the other connected users (should be something like socket.broadcast.emit but look into the docs as I'm not sure), or you could simply send an event, something like updated-mouse-position which will have a function bound to it that will handle the graphical part.
Hope this helps, feel free to add comments if you have doubs / problems with the basic configuration.