Multiplayer HTML5, Node.js, Socket.IO - html

Question

I trying create simple Multi-player with HTML5 Canvas, JavaScript(too using John Resig simple Inheritance library) and Node.js with Socket.IO.
My client code:
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
var socket = new io.Socket('127.0.0.1', {port: 8080});
var player = null;
var UP = 'UP',
LEFT = 'LEFT',
DOWN = 'DOWN',
RIGHT = 'RIGHT';
socket.connect();
socket.on('connect', function() {socket.send();
console.log('Connected!');
player = new Player(50, 50);
});
socket.on('message', function(msg) {
if(msg == 'UP') {
player.moveUP();
} else if(msg == 'LEFT') {
player.moveLEFT();
} else if(msg == 'DOWN') {
player.moveDOWN();
} else if(msg == 'RIGHT') {
player.moveRIGHT();
} else {
}
});
socket.on('disconnect', function() {
console.log('Disconnected!');
});
var Player = Class.extend({
init : function(x, y) {
this.x = x;
this.y = y;
},
setX : function(x){
this.x = x;
},
getX : function(){
return this.x;
},
setY : function(y){
this.y = y;
},
getY : function(){
return this.y;
},
draw : function(){
context.clearRect(0, 0, 350, 150);
context.fillRect(this.x, this.y, 15, 15);
},
move : function() {
this.x += 1;
this.y += 1;
},
moveUP : function() {
this.y--;
},
moveLEFT : function() {
this.x--;
},
moveDOWN : function() {
this.y++;
},
moveRIGHT : function() {
this.x++;
}
});
function checkKeyCode(event) {
var keyCode;
if(event == null) {
keyCode = window.event.keyCode;
} else {
keyCode = event.keyCode;
}
switch(keyCode) {
case 38: // UP
player.moveUP();
socket.send(UP);
break;
case 37: // LEFT
player.moveLEFT();
socket.send(LEFT);
break;
case 40: //DOWN
player.moveDOWN();
socket.send(DOWN);
break;
case 39: // RIGHT
player.moveRIGHT();
socket.send(RIGHT);
break;
default:
break;
}
}
function update() {
player.draw();
}
var FPS = 30;
setInterval(function() {
update();
player.draw();
}, 1000/FPS);
function init() {
document.onkeydown = checkKeyCode;
}
init();
And server code:
var http = require('http'),
io = require('socket.io'),
buffer = new Array(),
server = http.createServer(function(req, res){
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('<h1>Hello world</h1>');
});
server.listen(8080);
var socket = io.listen(server);
socket.on('connection', function(client){
client.on('message', function(message){
console.log(message);
client.broadcast(message);
})
client.on('disconnect', function(){
})
});
And when I run two client's I with first client can move second client Rect and with second client move first client rect and something like with third client can move first and second client rect's.
I have question how to create real Multi-Player? something like:
Open three client's and first client get rect1, second rect2 and last rect3. First client only can move rect1, client third can move only rect3.
Maybe anyone have idea? I search in Google but don't find answer.
Sorry for my English language.

Answer 1

First, check out http://www.google.com/events/io/2011/sessions/super-browser-2-turbo-hd-remix-introduction-to-html5-game-development.html
it explains how to use requestAnimationFrame among other things.
Second, the game state should exist on the server and be mirrored on the clients.
When a player clicks down, the client should only send a message. The server should then send a message to all the clients, including the client that took the action.
Each player should exist as an object on the server. When a player logs in they should be brought up to date about the status of each player already on the server.
modified client code: http://codr.cc/s/d0154536/js
modified server code: http://codr.cc/s/f96ce1d2/js

Answer 2

Glenn Fiedler's What every programmer needs to know about game networking -article is good read for anyone who wants get into game networking. It explains the basics in very high level so that it is adaptable for JS and Socket.io.

Answer 3

In case anyone stumbles across this question as I have just now, I wanted to add this link as an example.
I was following the same path as the op several months ago and read every article I could find on the authoritative server model (including the one referenced in the answer by #Epeli), and how to implement it with nodejs/socketio.
The result of my research manifested itself in the github project located at the link provided above (there is also a live demo). Hope this helps someone.

Answer 4

There is now an open-source multiplayer realtime javascript server (and client library) called Lance.gg, which provides, as you say,
a real multiplayer experience
It handles client-side prediction, step drift, bending, and basic physics.
Disclaimer: I am one of the contributors