Socket.io node.js Math.random to position sprites in the same place for all users

Question

Socket.io node.js Math.random to position sprites in the same place for all users

I'm creating a multi player game where users have to collect objects placed on the canvas. I need those objects to be placed in the same position for each user. I'm using the socket.io server to create the coordinates and the clientside to draw the sprites:

Client:

var ShoppingList = function(noItems){
    var self = this;
    self.list = [];

    for(var i = 0; i < noItems; i++){
    socket.emit('getPosition', {id: i, gameWidth: Game.width});

    socket.on('setPosition', function(data){
        self.list.push(new ShoppingListItem(data.id, data.x, data.y));;
        //this.list.push(new ShoppingListItem(i));
    });

Server:

socket.on('getPosition', function(data) {
    socket.emit('setPosition', {
        x: 32 + (Math.random() * (data.gameWidth - 64)),
        y: 32 + (Math.random() * (data.gameWidth - 64)),
        id: data.id
    });
});

However, accessing the ShoppingList in the first code block from within the socket.on function throws a null error. Is there anyway to add to that array outside of the function?

javascript
html5
oop
node.js
socket.io

Answer 1

You should take the socket.on('setPosition', ...) out of the ShoppingList function. The way your doing this doesn't really make sense because it would only be listening for the setPosition event while its in the function. This means that the function will end before the server triggers setPosition because after the emit event there will be a delay (however small). Instead try something like

var ShoppingList = function(noItems){
    var self = this;
    self.list = [];

    for(var i = 0; i < noItems; i++){
        socket.emit('getPosition', {id: i, gameWidth: Game.width});
    }
};

socket.on('setPosition', function(data){
    ShoppingList.list.push(new ShoppingListItem(data.id, data.x, data.y));
});