インスタント通信のクライアント編StropheJs.

サマリ
編集者は数年phpと書いている私たちで、純Jsのプロジェクトに触れるのも初めてです.また、IMのサービス側はJava(tigaseフレームワーク)で、古いバージョンBOSH(ロングポーリング)のインスタントメッセージの不安定さの問題を解決するために、pcページ版をwebsocktリンクに交換することにしました.Appはsocketで直結しています.ここでサービス側を8.0に更新し、更新インストール中に多くの穴に遭遇しました.再び記録して、IMあるいはxmppプロトコルの使い方に熟練しているのは引き続き見る必要はありません.
どのようにアカウントを追加するか、テストが成功するかなどのツール方法は別の編を参照してください.
トランスファゲート
基礎文法
xmppアドレスとセクション、もう一つの基礎応用層プロトコルのxmpp基礎学習xmppは主にxml形式でデータを伝送し、詳細はxepプロトコルを参照してください.ここではstropheのコンストラクタを使用して、主に以下のように使用します.

$iq,info query，           ，        。
$pres,        ，     。
$msg,       ，      .up() .c()  xml      。

プロセスの実行
ログイン認証

im.connect = new Strophe.Connection("ws://localhost:5290/xmpp-websocket/");
im.connect.connect('jid@localhost','pass',function(){
    console.info('this is login callback.');
});

ここで、サービス側は実は2つのステップに分かれており、最初のステップは接続であり、接続に成功するとステータスコード1に戻り、それからログインし、ログインに成功するとステータス5に戻ります.詳細なステータスコードはソースコードを参照します.パスワード認証の問題については、plain方式を一時的に採用し、その後、他の方法を更新します.例えば、sha 1です.
単独で話す

demo

を送信

var msg = $msg({
            to: receiver,
            from: 'jid@localhost',
            type: 'one',
            name: 'zeronlee',
            photo: 'image.png'
        }).c("body", null,msg);
        im.connect.send(msg.tree());

クエリーアーカイブ(履歴ローミング)

アーカイブを問い合わせる前に、まずアーカイブ(リポジトリ)が成功したことを確認し、サービス側は【転送ゲート】を表示し、自分で処理します.XEP-0136:Message Archivingを参照してください.
最も簡単なdemo:

var iq = $iq({type: 'set'}).c('query', {xmlns: 'urn:xmpp:mam:1'});
    im.connect.sendIQ(iq, function(a){
        console.log('sent iq',a);

        $(a).find('item').each(function(){
            var jid = $(this).attr('jid'); // jid
            console.log('jid',jid);
        });
    });

成功すると、次の情報が返されます.

  nAhOrNd/DNXBFtivwbm/vrN8I4GL2SLkc76eNmN0ruw=
  cnosUN6U9Md6o8TvLD42rB6jJnfPKF2DxkEBFmuK/IQ=
  14

14件の履歴メッセージが検出されたことを示し、クエリー・アーカイブはXEP-0313:Message Archive Management、サンプル・コードは「プラグインの使用方法」を参照してください.
グループチャット
グループチャットは単チャットに比べて複雑で、まずグループに入って(ここのグループにはパスワードがありません)、出席して、メッセージを送ります.

に出席

   var presence = $pres({from:'im7858@localhost',to:'[email protected]'}).c('x', {xmlns: 'http://jabber.org/protocol/muc'}).c('history', {maxstanzas: 0, maxchars:0, seconds:0});
    im.connect.send(presence, function(a){
        console.log('sent presence',a);
   
    });

クエリー群オープン機能情報

var presence = $iq({from:'im7858@[email protected]'}).c('query', {xmlns: 'http://jabber.org/protocol/disco#items'});
im.connect.send(presence, function(a){
    console.log('sent presence',a);

});

メッセージ

プッシュ購読
イントラネットスルー
プラグインの使用方法
mamアーカイブクエリーdemo

/* XEP-0313: Message Archive Management
 * Copyright (C) 2012 Kim Alvefur
 *
 * This file is MIT/X11 licensed. Please see the
 * LICENSE.txt file in the source package for more information.
 *
 * Modified by: Chris Tunbridge (github.com/Destreyf/)
 * Updated to support v0.3 of the XMPP XEP-0313 standard
 * http://xmpp.org/extensions/xep-0313.html
 *
 */

Strophe.addConnectionPlugin('mam', {
    _c: null,
    _p: [ 'with', 'start', 'end' ],
    init: function (conn) {
        this._c = conn;
        Strophe.addNamespace('MAM', 'urn:xmpp:mam:1');
    },
    query: function (jid, options) {
        var _p = this._p;
        var attr = {
            type:'set',
            from:jid
        };
        options = options || {};
        var mamAttr = {xmlns: Strophe.NS.MAM, with:jid};
        if (!!options.queryid) {
            mamAttr.queryid = options.queryid;
            delete options.queryid;
        }
        var iq = $iq(attr).c('query', mamAttr);

        // var i;
        // for (i = 0; i < this._p.length; i++) {
        //     var pn = _p[i];
        //     var p = options[pn];
        //     delete options[pn];
        //     if (!!p) {
        //         iq.c('field',{var:pn}).c('value').t(p).up().up();
        //     }
        // }
        // iq.up();
        //
        var onMessage = options.onMessage;
        delete options.onMessage;
        var onComplete = options.onComplete;
        delete options.onComplete;
        ////////////////////////////////////////////////
        // iq.cnode(new Strophe.RSM(options).toXML());

        var _c = this._c;
        var handler = _c.addHandler(onMessage, null, 'message', null);
        return this._c.sendIQ(iq, function (a) {
            console.log(a);
                _c.deleteHandler(handler);
                onComplete.apply(this, arguments);
            },
            function (err) {
                //error callBack function
                console.log("Error Response from server:", err);
            });
    }
});

プラグインはStrophe.addConnectionPlugin('mam', {init:function(){}})構造でなければロードに成功しません.webpackやページでロードした後、自動的にinitをインスタンス化します.グループチャットはプラグインの形式で使用されます.もちろん、他のより高度なものをカスタマイズすることもできます.具体的には、「XMPP高度なプログラミング+JavaScriptとjQueryを使用する」の第3部14章を参照してください.
植えた穴

addHandlersがhandlersを回転したときにコールバック関数が失われた.

参考文献

XMPP高度プログラミング+JavaScriptとjQuery

を使用