angular5中XMPP web客户端的起点

如果这个问题可能过于宽泛，我很抱歉，因为我是XMPP的新手

我正在开发一个Angular6应用程序，希望在其中集成一个Jabber聊天。 我在谷歌上搜索了很多，但似乎没有找到任何明确的答案

显然strophe.js看起来很有希望，但我找不到任何关于如何将其集成到Angular5/6项目中的文档

任何暗示都将不胜感激

谢谢

好吧，我找到了

第一个至少是有文件记录的。第二个不是，但我可以窥探来源

也许这可以帮助和我一样的人

谢谢

另外，如果有人知道一些更好的事情，他/她是最受欢迎的

编辑 我发布了一些代码片段，介绍了我是如何在TypeScript/Angular（6.x）前端通过strophe.js连接到eJabberd（本地）服务器的

chat-panel.service.ts

import { Injectable } from '@angular/core';

import { Strophe, $pres } from 'strophe.js';

import { EJABBERD } from 'app/api/api.module';

var chatPanelServiceInstance: any = null;

@Injectable()
export class ChatPanelService
{
    contacts: any[];
    chats: any[];
    user: any;
    client: any;

    // Private
    private _xmppConnectionsString: String = "ws://" + EJABBERD.host + ":5280/ws"; // WebSockets
    //private _xmppConnectionsString: String = "http://" + EJABBERD.host + ":5280/bosh"; // BOSH 
    private _xmppConnection: any = null;

    /**
     * Constructor
     *
     * @param {HttpClient} _httpClient
     */
    constructor(
    )
    {
        chatPanelServiceInstance = this;
        Strophe.log = (level: any, msg: string) => { console.log(level + ": " + msg); };
    }

    /**
     * Log into eJabberd
     *
     * @param {string} jid      user name
     * @param {string} password password (actually, the user token)
     */
    login(jid: string, password: string): void
    {
        if ( ! this._xmppConnection ) {
            this._xmppConnection = new Strophe.Connection( this._xmppConnectionsString , {'keepalive': true});
        }

        // this._xmppConnection.rawInput = (data: any) => {console.log("RAW IN: " + data)};
        // this._xmppConnection.rawOutput = (data: any) => {console.log("RAW OUT: " + data)};

        this._xmppConnection.connect(jid+'@'+EJABBERD.host, password, this._onConnect);
    }

    /**
     * Disconnect from eJabberd
     */
    logOut(): void
    {
        if ( this._xmppConnection ) {
            this._xmppConnection.options.sync = true;
            this._xmppConnection.flush();
            this._xmppConnection.disconnect("logout");
            this._xmppConnection = null;
        }
    }

    /**
     * eJabberd XMPP message Handler
     * @param {string} msg Message received
     */
    private _onMessage(msg: any): boolean
    {
        console.log(msg);

        return true;
    }

    /**
     * eJabberd connection Handler
     * @param {any} status connection result
     */
    private _onConnect(status: any): void
    {
        switch (status) {
            case Strophe.Status.CONNECTING:
                console.log("Connecting to eJabberd...");
                break;
            case Strophe.Status.CONNFAIL:
                console.log("eJabberd connection failed!");
                break;
            case Strophe.Status.DISCONNECTING:
                console.log("Disconnecting from eJabberd...");
                break;
            case Strophe.Status.DISCONNECTED:
                console.log("Disconnected from eJabberd");
                break;
            case Strophe.Status.CONNECTED:
                // We could have used 'this' instead of an external pointer (chatPanelServiceInstance), 
                // but the compiler is getting the meaning of 'this' wrong since strophe.js is not a native TypeScript library.
                // This means that at run time 'this' doesn't point the service instance, rather to the connection itself.
                // In order to avoid confusion I've chosen to use an explicit pointer to the service. 
                //
                chatPanelServiceInstance._xmppConnection.addHandler(chatPanelServiceInstance._onMessage, null, 'message');

                //Setting our presence in the server so that everyone can know that we are online
                chatPanelServiceInstance._xmppConnection.send($pres().tree());

                console.log("eJabberd connected!");
                break;
            case Strophe.Status.AUTHENTICATING:
                console.log("eJabberd authenticating...");
                break;
            case Strophe.Status.AUTHFAIL:
                console.log("eJabberd authentication failed!");
                break;
            case Strophe.Status.ERROR:
                console.log("eJabberd generic connection error!");
                break;
            case Strophe.Status.ATTACHED:
                console.log("eJabberd connection attached!");
                break;
            case Strophe.Status.REDIRECT:
                console.log("eJabberd connection redirected!");
                break;
            case Strophe.Status.CONNTIMEOUT:
                console.log("eJabberd connection timeout!");
                break;
            default:
                console.log("eJabberd: Unknow connection status");
        }
    }

有关要点：

注意_xmppConnectionString的使用：我使用Web套接字 连接，但波什版本的工作也很好

请注意，使用了指向服务的外部指针。（chatPanelServiceInstance-请参阅代码中的注释）

按如下方式安装strophe.js：在angular项目的根文件夹中，键入

npm Install--save strophe.js

---

我不能帮助解决这个问题，但几年前我制作了一个基于strophe的客户端（没有框架，仅限于jQuery），这可能是一个有用的例子：@ChristophBurschka谢谢你，Christof，实际上我能够在纯JS/jQuery中找到相对完善的文档示例。到目前为止，我还没有找到打字稿/角度的东西。无论如何，我会给你的项目看一眼，谢谢，可能会把你的代码和我（下面）的答案中提到的项目合并在一起。无论如何，非常感谢！魏杰你好。实际上，我最终使用了另一个strophe.js。它正在工作。我可以分享我所做的一些代码片段吗？嗨，拉斐尔，是的，请与我分享代码，我可能会从中得到一些想法。几周来，我一直在尝试将我的nativescript angular android应用程序项目设置为连接到openfire后端，但运气不佳@魏杰给你are@Raffaele_Candeliere感谢you@avinashkr嗨，很抱歉回答晚了。我的问题实际上是如何开始对话，我的例子主要涉及这一点。你可能会问，这可能会给你一个线索：