如何在 Angular 上使用 Strophe 在聊天中显示 XMPP 消息？

Question

我正在使用 Angular 10、Strophe.js 和 Openfire 制作消息传递应用程序。我可以连接到服务器，发送和接收消息，但是当我收到它们时，我无法在聊天中显示消息。这是我的代码：

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,
      },
    });
}

特别是，我面临的错误是：

TypeError: this.receiveMessage is not a function

我尝试了在本网站和其他网站上找到的许多解决方案，使用箭头函数，.bind()，由于我是 Angular 的新手，可能以错误的方式使用它们。反正我没有解决我的问题。我认为这与回调函数和范围有关。谁能帮帮我？

Answer 1

好的，我终于做到了。对于可能面临相同问题的其他人，我只关注 reMessage 函数，而问题出在 onConnect 函数上，实际上我在该特定函数上使用了 .bind(this) 并且一切正常。

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

如何在 Angular 上使用 Strophe 在聊天中显示 XMPP 消息？

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

xmpp

typescript

strophe.js

angular