Socket.IO display connected users list of a room - node.js

Question

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?
'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) => res.sendFile(INDEX, { root: __dirname }))
.listen(PORT, () => console.log(`Listening on ${PORT}`));
const io = socketIO(server);
let connectedUsers = [];
io.on('connection', (socket) => {
console.log('Connected peer: '+ socket.id);
socket.on('accessRoom', (username,room) => {
connectedUsers = { nickname: username, id: socket.id }
socket.join(room, (err) => {
socket.emit('accessStatus', 'done');
console.log(this)
})
updateUsersList()
})
socket.emit('channelStatus', socketData)
socket.emit('message', socket.id, 'connected')
socket.on('message', (id, msg) => {
socket.broadcast.emit('message', id, msg);
})
socket.on('disconnect', () => {
console.log('Disconnected')
})
function updateUsersList(){
socket.emit('usersList', connectedUsers)
}
});
io.on('ping', (socket) => {
console.log(socket);
io.emit('pong');
});
vuejs code
export default {
data () {
return {
isRegistered: false,
isConnected: false,
user: '',
message: '',
id: '',
channel: '',
usersList: []
}
},
mounted() {
this.pingServer()
this.updateUsersList()
io.on('pong', (data) => {
console.log(data);
})
io.on('channelStatus', (data) => {
if( data.status === 'connected' ){
this.id = data.IHMnumber;
this.isConnected = true;
console.log(data);
}
})
io.on('message', (from, msg) => {
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) => {
console.log(users);
this.usersList.push(users);
})
},
sendMessage(){
console.log(this.message)
io.emit('message', this.id ,this.message)
}
}
}
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 updateUsersList in the wrong place?

Answer 1

First of all, if you divide users by rooms, send messages to their rooms https://socket.io/docs/server-api/#socket-to-room . Here I show you one of ways to solve your problem. Change type of 'connectedUsers', for example, to map, where keys will be room-name, value - array of users:
const connectedUsers = new Map();
To handle changes of user lists create method for join
joinToRoom(room, user) {
// create users array, if key not exists
if (!connectedUsers.has(room)) {
connectedUsers.set(room, []);
}
// add user to room array
connectedUsers.get(room).push(user);
// call update function
updateUsersList(room);
}
and leave room:
leaveRoom(room, user) {
let userList = connectedUsers.get(room);
// delete user
userList = userList.filter(u => u !== user);
// update user list
if (!userList.length) {
// delete key if no more users in room
connectedUsers.delete(room);
} else
{
connectedUsers.set(room, userList);
// call update function
updateUsersList(room);
}
}
ALso change your method updateUsersList:
function updateUsersList(room){
socket.to(room).emit('usersList', {
room: room,
users: connectedUsers.get(room)
});
}
Pay attention, that we emit to event 'usersList' an object with room field for clarify, what room you should update at frontend.
The last step is call our methods:
when user joins room:
socket.join(room, (err) => {
const user = resolve user from request;
socket.emit('accessStatus', 'done');
joinToRoom(room, user);
console.log(this);
})
when user leave room:
i don`t see the event for leave room, so you just call there leaveRoom(room, user)
Also you should create some map to compare socketId and user, to correctly handle disconnect event and call leaveRoom(room, user) method.