How to implement Mesibo on Angular 13 app

'm trying to implement Mesibo on a angular 2+ app. it doesn’t have a lot of docs samples for angular also an npm package is not available, currently, I am converting the JS code on the documentation to typescript for angular implementation.

I successfully connect on Mesibo SDK now facing an error on MesiboListener. how can i apply this to my ts file. Thanks!

I create mesibo.js file in my assets then paste the mesibo js functions and import it on the inde.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>MesiboSample</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    
    **<script src="assets/mesibo.js" type="text/javascript"></script>**
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

on app.ts i declare the Mesibo and initialize it on nOnInit


declare var Mesibo: any;
  api: any;
  profile: any

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


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

       this.api.addListener(this.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();
  }


 MesiboListener(){
    this.api.MesiboListener.prototype.prototype.Mesibo_onConnectionStatus = function(status:any, value: any) {
      console.log("Mesibo_onConnectionStatus: "  + status);
    }
    
    this.api.prototype.Mesibo_onMessageStatus = function(m: any) {
      console.log("Mesibo_onMessageStatus: from "  
          + m.peer + " status: " + m.status);
    }
    
    this.api.prototype.Mesibo_onMessage = function(m: any) {
      console.log("Mesibo_onMessage: from "  + m.peer);
    }
  }

I successfully connect on mesibo sdk. my problem is the MesiboListener how to declare it. on this implementation this.api.MesiboListener.prototype is undefined. thanks guys!

Solution

You are not defining MesiboListener correctly.

Please change your code as below. We also uploaded basic sample with Angular 13 on https://github.com/mesibo/samples/tree/master/js/angular

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

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

       this.api.start();


  }

Mesibo_onConnectionStatus(status, value) {
        console.log("Mesibo_onConnectionStatus: "  + status);
}

Mesibo_onMessageStatus = function(m) {
        console.log("Mesibo_onMessageStatus: from "  + m.peer + " status: " + m.status + " id: " + m.mid);
}

Mesibo_onMessage = function(m) {
        console.log("Mesibo_onMessage: from "  + m.peer + " id: " + m.mid + " msg: " + m.message);
}