Question

I’m trying to create a basic Node application, every time a client connects I want to update the counter which is displayed on the page. (My goal is to create this application in its most simple, and learnable form to demonstrate node to my lecturer).

Server side application snippets:

Making the connection

var clients = 0;

io.sockets.on('connection', function (socket) {
  socket.on('connect', function () { clients += 1 });  
  socket.on('disconnect', function(){ clients -= 1 });  
});

Rendering the page

app.get(navigation.chat.page, function(req, res){ 
  res.render('chat', {
    title: navigation.chat.title,
    connected: clients
  });
});

Chat page jade template snippet:

  span#client_count #{connected}
  |  connected clients   

Client side jQuery, Socket.io and JavaScript

var socket = io.connect('http://localhost');

$(document).ready(function(){
  socket.on('connect', socket.emit('connect'));
});

Problem:
The number of connected clients only updates upon page refresh. I would like the number to be updated asynchronously. I’m quite new to node, socket.io and express so i’m unsure how to tackle the problem!

Answer 1

rather than incrementing on client side, better keep counter value on server side, increment on connection and decrement on disconnect io events. Then, you can send updated counter (in the same event handlers where value was changed). On client side, listen for event with counter and when received, replace value in html.

server :

var users_count = 0;

io.sockets.on('connection', function (socket) {
    //on connection, update users count
    ++users_count;
    //send it to every opened socket
    io.sockets.emit('users_count', users_count);

    //when this socket is closed
    socket.on('disconnect', function () {
        //user disconnected
        --users_count;
        //emit to every opened socket, so everyone has up to date data
        io.sockets.emit('users_count', users_count);
    });
});

client :

jQuery(function($){
    //connect to localhost
    var socket = io.connect('http://localhost');
    //handle users_count event, by updating our html
    socket.on('users_count', function(data){
        $('#client_count').text(data);
    });
});