Vue.js中如何监听Agora Chat第三方库触发的自定义事件

问题描述 #

在Vue组件的mounted钩子中初始化Agora Chat连接并注册事件处理器后，发现SDK触发事件但监听器无法捕获到任何事件。

原代码核心问题分析 #

用户的代码逻辑存在两个关键疏漏：

1. 缺少登录操作：仅创建了Agora Chat连接实例，但未执行登录流程——Agora Chat需完成登录后才会触发连接状态、消息接收类事件；
2. 事件注册时机无保障：若连接在监听器注册前已建立，会直接错过onConnected等早期触发的事件。

修复方案 #

1. 调整代码执行顺序与补充关键步骤

确保事件处理器在登录操作前完成注册，同时补充登录逻辑：

// 组件data定义
data() {
  return {
    agora: {
      baseUrl: "https://a41.chat.agora.io",
      appKey: "******",
      username: "fana",
      password: "123",
      conn: null
    }
  };
},

// mounted钩子中完成初始化、事件注册与登录
mounted() {
  // 1. 创建Agora Chat连接实例
  this.agora.conn = new AC.connection({
    appKey: this.agora.appKey,
  });

  // 2. 注册事件处理器（必须在login前执行）
  this.agora.conn.addEventHandler("agora-chat-events", {
    // 连接成功回调
    onConnected: () => {
      console.log("App connected.");
    },
    // 连接断开回调
    onDisconnected: () => {
      console.log("App disconnected.");
    },
    // 收到文本消息回调
    onTextMessage: (message) => {
      console.log("Message Recieved: ", message);
    },
    // Token即将过期回调
    onTokenWillExpire: (params) => {
      console.log("Token is about to expire. ", params);
      this.refreshToken(this.agora.username, this.agora.password);
    },
    // Token已过期回调
    onTokenExpired: (params) => {
      console.log("Token is expired. ", params);
      this.refreshToken(this.agora.username, this.agora.password);
    },
    // 错误回调
    onError: (error) => {
      console.log("on error: ", error);
    },
  });

  // 3. 执行登录操作
  this.agora.conn.login({
    user: this.agora.username,
    pwd: this.agora.password
  }).then(() => {
    console.log("登录成功");
  }).catch(error => {
    console.error("登录失败", error);
  });
},

// 组件销毁时清理资源，避免内存泄漏
beforeUnmount() {
  if (this.agora.conn) {
    // 移除事件处理器
    this.agora.conn.removeEventHandler("agora-chat-events");
    // 登出连接
    this.agora.conn.logout();
  }
}

2. 关键注意事项

• 事件处理器标识：addEventHandler的第一个参数是自定义唯一标识，用于后续移除处理器，名称可按需定义（示例中用agora-chat-events）；
• this指向：使用箭头函数确保回调中this指向Vue组件实例，避免调用组件方法（如refreshToken）时出现指向错误；
• 资源清理：组件销毁时必须移除事件处理器并登出连接，防止内存泄漏。

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