angular5 中 XMPP Web 客户端的起点

Question

如果问题可能过于宽泛，我深表歉意，因为我是 XMPP 的新手。

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

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

任何提示将不胜感激

谢谢

Answer 1

嗯，我找到了 xmpp-bosh-client and ngx-chat。

第一个至少有记录。第二个不是，但我可以查看源代码。

也许这可以帮助其他人。

谢谢

P.S。如果有人知道更好的东西，he/she是最受欢迎的

编辑

我正在发布一些代码片段，说明我如何在 TypeScript/Angular (6.x) 前端中使用 strophe.js 连接到 eJabberd（本地）服务器。

聊天-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");
        }
    }

angular5 中 XMPP Web 客户端的起点

Starting point for an XMPP web client in angular5

xmpp

strophe

angular

angular5

编辑