increasingly high latency in node.js multiplayer html5 game

I created a webpage using node.js, express js, socket.io, and jquery. It is a simple game wherein players join, give themselves a name, and then move themselves(a square) around a canvas on the page. What I've noticed is: when more people join the game and move around, there is enough lag to make the game unplayable (at only three people connected. Two people doesn't lag it much). I can't figure out if this is server-side lag or client-side (this is my first project dealing with multiplayer). I am doing all of the location calculations on the server, and sending an array of all the player objects back to every socket so that each client can render all of the players. The client only sends input and draws the players.

This is the client side script for the game. This is where I handle the input and rendering.

$(document).ready(function()
{
	var socket = io.connect();

	var canvas = document.getElementById("canvas_html");
	var ctx = canvas.getContext("2d");
  
	canvas.width = 512;
	canvas.height = 480;
  
	document.body.appendChild(canvas);

	var player = 
	{
		id: '',
		is_it: false,
		x: canvas.width / 2,
		y: canvas.height / 2,
		velx: 0,
		vely: 0
	}
    
    //tell the server to initialize this client as a new player
	socket.emit('init_client', player);
    
	var client_player_list = [];
    
    //receive a list of the player objects from the server
	socket.on('load_players', function(players)
	{
		client_player_list = players;
	});

	var keysDown = {};

	addEventListener('keydown', function(e)
	{
		keysDown[e.keyCode] = true;
	}, false);

	addEventListener('keyup', function(e)
	{
		delete keysDown[e.keyCode];
	}, false);

	//take input from keys and send input to server
	var update = function()
	{
		if(87 in keysDown)//player holding w
			socket.emit('up');
		if(83 in keysDown)//player holding s
			socket.emit('down');
		if(65 in keysDown)//player holding a
			socket.emit('left');
		if(68 in keysDown)//player holding d
			socket.emit('right');
		if(74 in keysDown)//player holding j
			socket.emit('tag');
	};

	//render all players, update players when server updates
	var render = function()
	{
		//ctx.clearColor = "rgba(0, 0, 0, .3)";
		ctx.clearRect( 0, 0, canvas.width, canvas.height);
		ctx.fillStyle = "#079641";
		ctx.textAlign = 'center';
      
        //loop through the players array and render each one
		for(var i = 0; i < client_player_list.length; i++)
		{
            //if the player is_it, render them as red
			if(client_player_list[i].is_it)
			{	
				ctx.fillStyle = "#8F0E0E";
				ctx.fillRect(client_player_list[i].x, client_player_list[i].y, 20, 20);
                
                //draw the players name above them
				ctx.fillStyle = "#FFF";
				ctx.font="15px Arial";
				ctx.fillText(client_player_list[i].name, client_player_list[i].x + 8, client_player_list[i].y - 3);
				continue;
			}
            
            //if the player !is_it, render them as green
            ctx.fillStyle = "#079641";
			ctx.fillRect(client_player_list[i].x, client_player_list[i].y, 20, 20);
            
            //draw the players name above them
			ctx.fillStyle = "#FFF";
			ctx.font="15px Arial";
			ctx.fillText(client_player_list[i].name, client_player_list[i].x + 8, client_player_list[i].y - 3);
		}
         
        //when the server sends an update, replace the current players array with the one that the server just sent
		socket.on('sv_update', function(players)
		{
			client_player_list = players;
		});
	};

	//main loop
	var main = function()
	{
		setInterval(function()
		{
			update();
			render();
		}, 1000/60);
	};

	main();

	//trigger the disconnect event when a page refreshes or unloads
	$(window).bind('beforeunload', function()
	{
		socket.emit('disconnect');
	});
});

Answers


Move below code from render function in client side.

//when the server sends an update, replace the current players array with the one that the server just sent
socket.on('sv_update', function(players)
{
    client_player_list = players;
});

Need Your Help

Programmatically remove notifcation try icon for other program

.net process taskbar

I'm trying to write a monitor app for Dream Daemon, a specific server app. Since the server app tends to crash (specifically, Dream Daemon is a server for a specific brand of interpreted code, so ...

How to fold comments in eclipse

eclipse shortcuts

I have written a lot of javadoc comments in my class and each function has a large description. When I open the class it is inconvenient to scroll down with all those comments in place.