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

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));
  }
});