How can I get the chat room online members without reload the page in converse js - xmpp

Question

I am using converse.js and I am trying to get the users who joined the chat room, I am able to get the users but when a new user joins I can not get the new user on my console log until I reload the page, Below I have created a plugin for getting the users.
export const moderationActions = () => {
window.converse.plugins.add('moderation-actions', {
dependencies: [],
initialize: function () {
const _converse = this._converse;
_converse.api.listen.on(
'getToolbarButtons',
async (toolbar_el: any, buttons: any) => {
toolbar_el.model.occupants.models.map((occupant: any) => {
console.log(occupant.get('nick'), occupant.get('show')),
console.log(occupant);
});
},
);
},
});
};
There are a few events related to users like membersFetched but don't know how can I get the users without reloading the page

Answer 1

Whenever someone joins or leaves a room, a new occupant model is added or removed from the occupants collection on the room model (available via the .occupants attribute).
Whenever a model is added or removed from a collection, an add or remove event is triggered which you can listen to.
So you can try something like this:
window.converse.plugins.add('num-occupants', {
initialize: function () {
const _converse = this._converse;
const room = await api.rooms.get('jid');
let num_occupants = room.occupants.length;
room.occupants.on('add', () => (num_occupants = room.occupants.length));
room.occupants.on('remove', () => (num_occupants = room.occupants.length));
}
});