Get the list of connected users/client in Socket.io

Question

I need to get a list of connected users or clients from socket.io for real time chat.

List of connected user image

I managed to display a list of client who connect to my route/API (localhost:3003/chat). Who ever access this route (authorize or not) will be displayed as shown in the picture. My problem is on initial access or if you try to refresh the browser the client will not see the currently connected users or history of client connections.

This is my sample code for socket.io for server side,

 module.exports.initializeSocketIO = (io) => {
 io.on('connection', (socket) => { 
    socket.on('connectedUser', (users) =>{
        socket.name = users;
        io.emit('connectedUser', users);
        console.log(users + ' has joined the chat.');
    });

    socket.on('disconnect', (user) => {
        io.emit('disconnect', user);
        console.log(socket.name + ' has left the chat.');
    });

    socket.on('chatMessage', (from, msg) => {
        io.emit('chatMessage', from, msg);
        console.log('Message From: ' + from + '\n -' + msg);
    });

    socket.on('showTypingUser', (user) => {
        io.emit('showTypingUser', user);
    });
});
};

This is my sample code for socket.io for client side

var socket = io(); 

socket.on('connectedUser', function(users){
   var name = $('#currentUser').val();
   var me = $('#user').val(name);
   socket.name = users;
   if(users != me){
      $('#connectedUser').append('<tr><td>' + '<b>' + users + '</b>' + ' has 
      joined the discussion. </td></tr>' );
   }
});


socket.on('chatMessage', function(from, msg){
   var me = $('#user').val();
   var color = (from == me) ? 'green' : '#009afd';
   var from = (from == me) ? 'Me' : from;
   var date = new Date();
   if(from == "Me"){
      $('#messages').append('<div class="speech-bubble">'  + '<b style="color:' + color + '">' + from + ':</b> ' + msg + ' <span class="pull-right" style="color:gray">' + date.toLocaleString() + '</span>' +'</div>');
  } else {
     $('#messages').append('<div class="speech-bubble-reply">' +  '<b 
 style="color:' + color + '">' + from + ':</b> ' + msg + ' <span class="pull-right" style="color:gray">' + date.toLocaleString() + '</span>' +'</div>');
  }
});


socket.on('showTypingUser', function(user){
   var name = $('#currentUser').val();
   var me = $('#user').val(name);
   if(user != me) {
      $('#notifyUser').text(user + ' is typing ...');
   } 
   setTimeout(function(){ $('#notifyUser').text(''); }, 10000);;
});


socket.on('disconnect', function(user){
   var name = $('#currentUser').val(); 
   var me = $('#user').val(name);
   if(socket.name != name){
      $('#connectedUser').append('<tr><td>' + '<b>' + socket.name  + '</b>' + ' has left the discussion. </td></tr>' );
  }
 });


$(document).ready(function(){
   var name = $('#currentUser').val();
  $('#welcomeMessage').append('<div class="welcome-chat">Welcome to Entrenami Chat</div>')
  socket.emit('connectedUser', name);
});

NOTE: I'm using express for my route and controller and EJS for my view. I'm a bit stuck here because I don't know where to look on how to solve my problem.

Answer 1

io.engine.clientsCount return the total count of connected users you can send it to client when a user get connected like this:

io.on('connection', (socket) => {
   var total=io.engine.clientsCount;
   socket.emit('getCount',total)
});