Node.js and socket.io, Clients not sharing counter

Question

Node.js and socket.io, Clients not sharing counter

I'm playing around with node.js and socket.io, trying to get a counting program working. Basically what it should so is increase a shared counter by 1 each time a connected client presses a button, and display that number to all connected clients.

What I'm getting is each client has a separate counter somehow. For example if I count to 10 on one client, then go and start counting on another, it starts at 1. The first client will then resume from 10 if I go back. Ive tried to troubleshoot this as best I can, but I'm not too savvy when it comes to JS scoping issues (which I suspect this is) or sockets.

var socketio = require('socket.io');
var io;
var count = 1;

exports.listen = function(server){
    io = socketio.listen(server);
    io.set('log level', 1);

    io.sockets.on('connection', function (socket){
        joinRoom(socket, 'Lobby');
        count = handleCounter(socket, count);
    });
};

function handleCounter(socket, count){
    socket.on('endCount', function(){
        io.sockets.emit('endCount', {
            success: true,
            num: count
        });
            count++;
            console.log(count);
    });
    return count;
}

function joinRoom(socket, room){
    socket.join(room);
}

As a note, I had it working before when I simply placed the code from handleCounter into the io.sockets.on('connection') function, but I'd like to know why it wont work when I try to place it outside like the code above.

Any help is really appreciated, thanks.

javascript
node.js
scope
socket.io

Answer 1

You are returning count at the end of handleCounter(), but it's incremented in an asynchronous function, so it hasn't been incremented before it returns.

Instead of passing count around, you can just refer to the count variable you declare at the top of the file, which is available in all of your closures. You also don't need the endCount listener, and emitter, if all you want to do is send out the new count to the clients every time a client connects.

var socketio = require('socket.io');
var io;
var count = 1;

exports.listen = function(server){
    io = socketio.listen(server);
    io.set('log level', 1);

    io.sockets.on('connection', function (socket){
        joinRoom(socket, 'Lobby');
        handleCounter();
    });
};

function handleCounter(){
    count++;
    console.log(count);

    io.sockets.emit('count', {
        success: true,
        num: count
    });
}

function joinRoom(socket, room){
    socket.join(room);
}

Answer 2

http://realtimeanswer-5042.usw1.actionbox.io:4000/

in short, send the data on connect and send the data to all the clients on button click.

The client only updates the dom when it gets a message from the server.

The biggest issue I see in your code is that you're complicating the scope of count. it's module scope, and can simply be used without passing it around.

server:

var app = require('express')()
  , server = require('http').createServer(app)
  , io = require('socket.io').listen(server)
  , count = 0;

var port = 4000;

server.listen(port);

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

io.set('log level', 1);

io.sockets.on('connection', function (socket) {
  console.log(count);
  socket.emit('count', count);
  socket.on('inc', function () {
    count++;
    console.log('inc', count);
    io.sockets.emit('count', count);
  });
});

client

<!DOCTYPE html>
<meta charset='utf-8'>
<title>real time fun</title>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>

<script>
  $(function() {
    var socket = io.connect();

    socket.on('count', function (count) {
      $('#count').text(count);
    });

    $('button').click(function () {
      socket.emit('inc');
    });
  });
</script>
<div id='count'></div>
<button>inc</button>