(On Disconnect) Last player hangs

[mla]

I have a multiplayer game that assigns and displays an avatar for each player that accesses the game.

When a player leaves the game, it will drop the image so the avatar is no longer on screen. This works - sort of. 

Here is the problem: Ex: Three players access the game, three avatars are created. Then one player leaves, that avatar is removed from screen. The other two players leave, and for some reason, the last avatar remains on screen. So the host will always see that last avatar sitting there.

I'm using splice to remove the players. I check my array and all players dropped from the array. It shows []. I have no clue how that avatar is still there.

Is there a way to completely remove that socket.id from the game?

 

[mla]

I just realized why my player is hanging. I have a loop to redraw the players, and if array = 0, then it won't go into the loop.

players.splice(players.indexOf(removePlayer), 1);
for (var i = 0; i < players.length; i++) {
  socket.broadcast.emit('setPosition', {id: players[i].id, x: players[i].getX, y: players[i].getY, imgFile: players[i].getImgFile, name: players[i].name});
}

Is there a better way to drop players?

[GameDev Quest]

What does the code look like for the callback that receives 'setPosition'? 

And shouldn't one Avatar remain if there is a 'host' viewing the game? Is the host not a player?

[mla]

The host doesn't get an avatar. He's there as the facilitator who is watching the players and answering questions.

Each player has a unique avatar based on a set x, y position.

socket.on('setPosition', function(data){
	context.clearRect(0, 0, canvas.width, canvas.height);	
	var floorplan = new Image();
		floorplan.onload = function () {
		context.drawImage(floorplan, 150, 360);
		var img = new Image();
		img.onload = function () {
			context.drawImage(img, data.x, data.y, 85, 210);
			context.font = '12pt Arial';
			context.fillStyle = 'white';
			context.textAlign="center";
			var rectHeight = 50;
			var rectWidth = 100;
			var rectX = data.x;
			var rectY = data.y+200;
			context.fillText(data.name, rectX+(rectWidth/2),rectY+(rectHeight/2));				
		}
	img.src = data.imgFile;	
			
		}
	floorplan.src = '../images/floor6P.png';
	
});

 server side: