How can I show XMPP messages in a chat using Strophe on Angular?

Question

I am making an application for messaging using Angular 10, Strophe.js and Openfire. I can connect to the server, send messages and receive them, but when I receive them I can't show the messages in the chat. Here is my code:

connection.connect(this.doc_name + "@server", 'password', this.onConnect);

onConnect(status) {
    if (status == Strophe.Status.CONNECTING) {
      console.log('Strophe is connecting.');
    } else if (status == Strophe.Status.CONNECTED) {
      console.log('Strophe is connected.');
      connection.addHandler(reMessage, null, 'message', 'chat', null, null, null);

      function reMessage(msg) {
        // parse out the from and type attributes of <message>, and the body sub-elements
        var from = msg.getAttribute('from');
        var type = msg.getAttribute('type');
        var elems = msg.getElementsByTagName('body');
        if (type == "chat" && elems.length > 0) {
          var body = elems[0];
          console.log(from);
          console.log("The message received is: "+ Strophe.getText(body));

        }
        var text = Strophe.getText(body);
        console.log(text);
        this.receiveMessage(text, false, from);

        return true;
      }

      connection.send($pres().tree());
    }}
 

    receiveMessage(event: any, reply: boolean, from: any) {
    const files = !event.files ? [] : event.files.map((file) => {
      return {
        url: file.src,
        type: file.type,
        icon: 'file-text-outline',
      };
    });

    this.messages.push({

      text: event.message,
      date: new Date(),
      reply: reply,
      type: files.length ? 'file' : 'text',
      files: files,
      user: {
        name: from,
      },
    });
}

In particular, the error that I am facing is:

TypeError: this.receiveMessage is not a function

I tried many solutions found on this site and others, using arrow function, .bind(), maybe using them in the wrong way due to the fact that I am new to Angular. Anyway I didn't solve my problem. I think it is related to the callback function and on the scope of this. Can anyone help me?

Answer 1

Ok, I finally did it. For the others that could face the same issue, I was focusing just on the reMessage function while the problem was on the onConnect function, indeed I used .bind(this) on that particular function and everything went fine.

connection.connect(this.doc_name + "@server", 'password', this.onConnect.bind(this));