title: Socket.IO display connected users list of a room
body: <p>I have a vue.js/node/socket.io chat application. I need to create a list of online users that will stay up to date when users connect or disconnect. I'm trying using this code, but I'm not able to update the users list when someone join the room. How I can fix this?</p>
  
  <pre><code>'use strict';
  
  const express = require('express');
  const socketIO = require('socket.io');
  
  const PORT = process.env.PORT || 3000;
  const INDEX = '/index.html';
  
  // TODO: controllo query url
  const server = express()
  .use('/modules', express.static(__dirname + '/node_modules'))
  .use('/assets', express.static(__dirname + '/assets'))
  .use((req, res) =&gt; res.sendFile(INDEX, { root: __dirname }))
  .listen(PORT, () =&gt; console.log(`Listening on ${PORT}`));
  const io = socketIO(server);
  
  let connectedUsers = [];
  
  io.on('connection', (socket) =&gt; { 
    console.log('Connected peer: '+ socket.id);
    socket.on('accessRoom', (username,room) =&gt; {
      connectedUsers = { nickname: username, id: socket.id } 
      socket.join(room, (err) =&gt; {
        socket.emit('accessStatus', 'done');
        console.log(this)
      })
      updateUsersList()
    })
  
    socket.emit('channelStatus', socketData)
    socket.emit('message', socket.id, 'connected')
  
    socket.on('message', (id, msg) =&gt; { 
      socket.broadcast.emit('message', id, msg);
    })
  
    socket.on('disconnect', () =&gt; {
      console.log('Disconnected')
    })
  
    function updateUsersList(){
      socket.emit('usersList', connectedUsers)
    }
  
  });
  
  io.on('ping', (socket) =&gt; {
    console.log(socket);
    io.emit('pong');
  });
  </code></pre>
  
  <p>vuejs code</p>
  
  <pre><code>export default {
    data () {
      return {
        isRegistered: false,
        isConnected: false,
        user: '',
        message: '',
        id: '',
        channel: '',
        usersList: []
      }
    },
    mounted() {
      this.pingServer()
      this.updateUsersList()
      io.on('pong', (data) =&gt; {
        console.log(data);
      })
      io.on('channelStatus', (data) =&gt; {
          if( data.status === 'connected' ){
            this.id = data.IHMnumber;
            this.isConnected = true;
            console.log(data);
          }
      })
      io.on('message', (from, msg) =&gt; {
        console.log(from)
        console.log(msg)
      })
    },
    methods: {
      pingServer(){
        io.emit('ping')
      },
      connect(){
        if( this.isRegistered === false){
          this.user = this.user;
          this.isRegistered = true;
          console.log(this.isRegistered);
          console.log(this.user);
          io.open()
          return this.user;
        }
      },
      updateUsersList(){
        io.on('usersList', (users) =&gt; {
          console.log(users);
          this.usersList.push(users);
        })
      },
      sendMessage(){
        console.log(this.message)
        io.emit('message', this.id ,this.message)
      }
    }
  }
  </code></pre>
  
  <p>Whit this code, the user that is creating the room will not recive the users list. For the users that will join the room instead, in the console I'm able to see that they are added to the array of users, but if someone joined the room, the event will not be logged in console with the updated info. Maybe I need to refactor the code, maybe I'm calling the <code>updateUsersList</code> in the wrong place?</p>