Angular 2+集成Mesibo：MesiboListener声明报错求助

你的核心问题是误解了Mesibo Listener的实现逻辑——不需要修改this.api.MesiboListener.prototype，而是直接创建一个包含Mesibo要求的回调方法的对象，传递给addListener即可。

修正后的app.ts代码实现 #

declare var Mesibo: any;

export class YourComponent { // 替换为你的实际组件类名
  api: any;
  profile: any;

  token = '54a7499f41b57ff53564260e9a8bceca4599********';
  app_id = '****';

  ngOnInit(): void {
    this.api = new Mesibo();

    // 创建自定义Listener对象，实现Mesibo要求的回调方法
    const mesiboListener = {
      Mesibo_onConnectionStatus: (status: any, value: any) => {
        console.log("Mesibo_onConnectionStatus: " + status);
        // 如需访问组件内部属性/方法，箭头函数可保证this指向当前组件实例
        // 示例：this.connectionStatus = status;
      },
      Mesibo_onMessageStatus: (m: any) => {
        console.log("Mesibo_onMessageStatus: from " + m.peer + " status: " + m.status);
      },
      Mesibo_onMessage: (m: any) => {
        console.log("Mesibo_onMessage: from " + m.peer);
      }
    };

    // 将自定义Listener绑定到Mesibo实例
    this.api.addListener(mesiboListener);

    this.api.setAppName(this.app_id);
    this.api.setAccessToken(this.token);
    this.api.setDatabase("mesibo");

    this.api.start();

    this.profile = this.api.getProfile('2677684');
    console.log(this.profile);

    let m = this.profile.newMessage();
    m.message = "Hello angular";
    m.send();
  }
}

关键修正说明 #

• 抛弃原型修改操作：Mesibo的addListener方法接受普通对象作为参数，只要对象包含官方定义的回调方法（如Mesibo_onConnectionStatus）即可生效，无需修改任何原型链。
• 用箭头函数锁定上下文：如果需要在回调中操作组件内部的属性或方法，箭头函数可以确保this始终指向当前Angular组件实例，避免上下文丢失。
• 简化Listener创建逻辑：直接定义包含所需回调的对象，完全符合Mesibo JavaScript SDK的实际调用规范，避免复杂且错误的原型操作。

内容的提问来源于stack exchange，提问作者Pao D.