node + socket.io: multiple server emits for single client emit?

Question

I've just managed to connect to a server script with socket.io, so I'm happy about that. I'm less happy though about the weird behavior my script generates: I send one emit to the server script on a buttonclick, and the server test script sends back a message 6x to the console log. Googling this problem description gets ideas about spotty, repeating connections, but I don't think that's it.

Anyway, here's the client app.js:

var commentapp={
    init: function(){
        var commentapp=this;
        commentapp.btn_api=$('#btn_api'); 
        commentapp.btn_api.click(this.get_comment_data);        
    },
    get_comment_data: function(btn_event){
        var commentapp=this;

        console.log('trying to connect');
        commentapp.socket=io.connect('http://localhost:8080');

        commentapp.socket.on('connect', function() {
            commentapp.socket.emit('btn_api_call');
        });  //commentapp.socket.on 'connect',

        commentapp.socket.on('serverMessage', function(content){
            console.log(content);
            }
        ); //commentapp.socket.on('serverMessage'

    }

};

$(function() {
  commentapp.init();
});

The server script is as follows:

var httpd = require("http").createServer(handler);
var io=require('/Users/user/Virtualenvs/node_modules/socket.io/lib/socket.io').listen(httpd);
var fs = require('fs');
var url = require("url");
var path = require("path");
var port = process.argv[2] || 8080;

httpd.listen(parseInt(port, 10));   

function handler (request, response) {

  var uri = url.parse(request.url).pathname,    
  filename = path.join(process.cwd(), uri);      

  console.log(uri);

  path.exists(filename, function(exists) {  
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;   //these returns get you out of the function I think
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';  

    fs.readFile(filename, "binary", function(err, file) {       
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      response.writeHead(200);
      response.write(file, "binary");  //otherwise here's where the file gets finally served
      response.end();
    }); //fs.readFile

  }); //path.exists

      io.sockets.on('connection',function(socket) {
        socket.on('btn_api_call', function() {
            socket.emit('serverMessage', 'Server heard you.');
            });

      });

};              

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");

Both of these are cannibalized from https://github.com/accbel/nodejs-socketio-example and Pedro Teixeira's book.

So if I click the button to generate the 'btn_api_call'emit, the console log will say "'Server heard you.'" 6x. Hopefully this is a rookie mistake easily set straight.

Thanks for your help!

Answer 1

This is likely due to having your registration for connections inside of a route handler.

Each time a request comes in that is handled by that route, the code is adding a new listener for connections.

You likely have a similar problem in your client - connecting each time the button is clicked.

Move your connection listener outside the route like this:

function handler (request, response) {

  var uri = url.parse(request.url).pathname,    
  filename = path.join(process.cwd(), uri);      

  console.log(uri);

  path.exists(filename, function(exists) {  
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;   //these returns get you out of the function I think
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';  

    fs.readFile(filename, "binary", function(err, file) {       
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      response.writeHead(200);
      response.write(file, "binary");  //otherwise here's where the file gets finally served
      response.end();
    }); //fs.readFile

  }); //path.exists
};

io.sockets.on('connection',function(socket) {
  socket.on('btn_api_call', function() {
    socket.emit('serverMessage', 'Server heard you.');
  });
});

On the client move the connect logic to init - something like:

var commentapp={
    init: function(){
        var commentapp=this;
        commentapp.btn_api=$('#btn_api'); 
        commentapp.btn_api.click(this.get_comment_data);        

        console.log('trying to connect');
        commentapp.socket=io.connect('http://localhost:8080');

        commentapp.socket.on('connect', function() {
            commentapp.socket.emit('btn_api_call');
        });  //commentapp.socket.on 'connect',

        commentapp.socket.on('serverMessage', function(content){
            console.log(content);
            }
        ); //commentapp.socket.on('serverMessage'
    },
    get_comment_data: function(btn_event){
        var commentapp=this;

        commentapp.socket.emit('btn_api_call');
    }

};