socket.io data seems to be sent multiple times(nodejs and craftyjs)

Question

I am following this tutorial on making HTML5 games. I wanted to try and mix node in to make it multiplayer. I am using node.js(v0.10.4) on server and crafty.js on front end.

I am using socket.io to send and receive messages. For now it's just me(not multiple clients). The weird thing that happens is that the message that comes from the server seems to be sent multiple times. I turned on debug mode in socket.io but it only seems to be sending the data once, yet on the front end the data seems to be coming in, in multiples. I set an incrementor on the data and it seems as if the incrementor is not incrementing multiple times but instead I am getting multiple copies of the same data.

here's node code:

var http = require('http').createServer(handler),
static = require('node-static'),
io = require('socket.io').listen(http);

io.set('log level', 3);
http.listen(80);
//attach the socket to our server
var file = new static.Server(); //Create a file object so we can server the files in the correct folder

function handler(req, res) {
    req.addListener('end', function() {
      file.serve(req, res);
    }).resume();
}

io.sockets.on('connection', function (socket) { //listen for any sockets that will come from the client 
  socket.on('collected', function(data) {
   /**** here's where the data is being sent back to the client *****/
   socket.emit('messageFromServer', { data: data.number });
  });
});

and here's front end code:

//messenger entity
Crafty.c('SendRecieveMessages',{
    count: 0,
    sendMessageToServer : function() {
      console.log('got a village');
      /**** Here's where we send the message to the server ****/
      socket.emit('collected', { village : "The message went to the server and back. it's collected", number : this.count });
      this.count++;
},
recieveMessageFromServer : function() {
    socket.on('messageFromServer', function(data) {
        /*** This data seems to be coming back or logging multiple times? ***/  
        console.log(data);
    });
}
});

Lastly here's a screenshot of the debug in process. As you can see number is not always incrementing, it almost looks like the data is getting stored. Thanks!

http://cl.ly/image/0i3H0q2P1X0S

Answer 1

It looks like every time you call Crafty.c, recieveMessageFromServer() is getting called too. Every time recieveMessageFromServer is invoked, it attaches an additional event listener on the socket. That's why the first time data comes back you get one copy, then the second time you get two, the third time you get three, and so on.

You either need to prevent recieveMessageFromServer from being called multiple times, or use removeListener or removeAllListeners to remove the previously attached listeners.

Answer 2

Thanks to @Bret Copeland for helping me figure this one out. As he pointed out, every time socket.on() is called, it seems to add another listener. To prevent this...

I declared a global variable:

I declared a variable as a property in my Game object(in craftyjs, so use whatever you want in your setup)

Game = {

    //lots of other code here...

    //need this to use later for socket.io
    send_message : true
}

then edited my recieveMessageFromServer() function to check whether its ok to send the message or not:

recieveMessageFromServer : function() {
        console.log('does this show up multiple times?');
        /* Check whether the send_message is true before sending */
        if (Game.send_message) {
            socket.on('messageFromServer', function(data) {
            console.log(data);
            Game.send_message = false;
        });
    }
}