如何在Converse.js中无需刷新页面实时获取聊天室在线成员

问题分析 #

你当前代码监听的getToolbarButtons事件，只会在工具栏按钮加载或更新时触发，没法响应新用户加入的实时变化。要实现不用刷新就能获取用户，得监听Converse.js提供的成员变更相关事件，同时结合初始成员加载的事件覆盖所有场景。

解决方案代码 #

export const moderationActions = () => {
  window.converse.plugins.add('moderation-actions', {
    dependencies: [],
    initialize: function () {
      const _converse = this._converse;

      // 抽通用的用户日志函数，避免重复写代码
      const logOccupants = (occupants) => {
        occupants.forEach(occupant => {
          console.log(occupant.get('nick'), occupant.get('show'));
          console.log(occupant);
        });
      };

      // 首次加载成员列表时触发，获取初始所有用户
      _converse.api.listen.on('membersFetched', (room) => {
        console.log('初始成员列表：');
        logOccupants(room.occupants.models);
      });

      // 新用户加入时实时触发
      _converse.api.listen.on('occupantJoined', (occupant) => {
        console.log('新用户加入：');
        console.log(occupant.get('nick'), occupant.get('show'));
        console.log(occupant);
        // 如果要打印当前全部用户，可调用logOccupants(occupant.room.occupants.models)
      });

      // 可选：监听用户离开事件
      _converse.api.listen.on('occupantLeft', (occupant) => {
        console.log('用户离开：');
        console.log(occupant.get('nick'));
      });
    },
  });
};

代码说明 #

• membersFetched：聊天室成员列表首次加载完成时触发，用来获取初始的所有用户。
• occupantJoined：每次有新用户加入时触发，实时拿到新用户信息，不用刷新页面。
• occupantLeft：可选监听，用来处理用户离开的场景。
• 提取logOccupants通用函数，既避免重复代码，也方便后续扩展（比如更新页面上的用户列表显示）。

额外提示 #

如果需要点击工具栏按钮时查看当前用户，你可以保留原来的getToolbarButtons事件监听，但结合上面的事件保证用户列表实时性，或者直接在按钮点击逻辑里获取当前房间的occupants模型即可。

内容的提问来源于stack exchange，提问作者Karim