strophe.js 插件 XMPP openfire

参考资料：http://strophe.im/strophejs/

             https://github.com/strophe/strophejs-plugins

            http://amazeui.org/

最近公司要做一个微信关注号，用来推广一个关于收发需求的APP，用到了strophe.js，数据后台是PHP， 服务端使用的是openfire.

直接上图吧：

整个过程就是登录openfire的过程，整个过程的数据交换全部用body包裹起来，在服务端的

org.jivesoftware.openfire.http.HttpBindServlet

为入口进行处理的,

过程就略过了。直接说strophe.js插件了。

 var demand = {};
    demand.sid = '{$sid}';
    demand.remark = '';
    demand.latitude = 0;
    demand.longitude = 0;
    demand.isweixin = 1;
    demand.city = '';
    demand.location = '';
    demand.userid = '{$userid}';
    demand.labelid = '{$labelid}';
    demand.labelname = '{$labelname}';
    demand.token='{$token}';
    var domain = '{$domain}';
    var source = '{$source}';
    $(function () {
        $('#top_bar').hide();
        getLocation();
        if (connection == null && demand.userid != "") {
            login(demand.userid);
        }
    }); 30     /**
     * 获取当前位置
     */
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(gpsCallback);
        } else {
            alert("您的浏览器不支持地理定位,请手动修改位置");
        }
    }
    /**
     * 根据位置创建地图
     */
    function gpsCallback(position) {
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        var gpsPoint = new BMap.Point(lon, lat);
        CreateMap("allmap", lon, lat, 14);
        //添加地图控件和事件 78     }
    /**
     * 获取位置
     * @param point 经纬度
     */
    function translateCallback(point) {
        demand.longitude = lon = point.lng.toFixed(6);
        demand.latitude = lat = point.lat.toFixed(6);
        getmerchants(2000);
        latlon = lat + ',' + lon;
        $.ajax({
            dataType: 'jsonp',
            url: 'http://api.map.baidu.com/geocoder/v2/',
            success: function (result) {
                demand.city = result.result.addressComponent.city;
                demand.location = result.result.formatted_address;
            }
        });
    }
    /**
     * 获取附近的商家
     */
    function getmerchants(radius) {
        $.post("/service/demand/nearmerchant/ran/" + Math.random(),
                {
                    userid: demand.userid,
                    sid: demand.sid,
                    longitude: demand.longitude,
                    latitude: demand.latitude,
                    radius: radius,
                    labelid: demand.labelid,
                    isweixin: '1'
                },
                function (data) {
                    if (data.status == 1) {
                        var result = data.data;
                        var merchants = result.merchants;
                        var temp = null;
                        for (var i = 0, len = merchants.length; i < len; i++) {
                           //地图标注126                         }
                    } else {
                        alert(data.info);
                    }
                });
    }
    /**
     * 发布需求
     */
    function releasedemand() {
        if (demand.latitude == 0 || demand.longitude == 0) {
            alert('请打开手机定位功能,然后重新进入本页面,再进行需求发布!');
        } else {
            if ($.trim($('#remark').val()) == '') {
                alert('请填写备注!');
            } else {
                demand.remark = $('#remark').val();
                $.ajax({
                    type: 'POST',
                    url: "/service/demand/release",
                    data: demand,
                    success: function (result) {
                       //成功处理156                     }
                });
            }
        }
    }
    /**
     * 返回
     */
    function back() {
        if (connection.demand.DemandId > 0) {
            var htmlStr = [];
            htmlStr.push('<div class="am-modal am-modal-no-btn" tabindex="-1" id="cancel-modal">');
            htmlStr.push('<img src="__PUBLIC__/web/demand/close_td.png" alt="关闭" style="height:29px;29px;"/>');
            。。。。。。//组装相关弹框代码
            $("#cancelmodal").html(htmlStr.join(''));
            $('#cancel-modal').modal({closeViaDimmer: 0});
        }
    }
    /**
     * 弹出发出需求的模态窗口
     */
    function publishModal() {
        if (connection == null) {
            login(demand.userid);
            return false;
        }
        var htmlStr = ['<div class="am-modal am-modal-no-btn" tabindex="-1" id="publish-modal">'];
        。。。。。。//组装相关弹框代码
        htmlStr.push('<button type="button" class="am-btn am-btn-success am-btn-block" data-am-modal-close onclick="releasedemand();" style="margin-top: 10px; border-radius: 10px">');
        htmlStr.push('确定发布');
        htmlStr.push('</button></div></div>');
        $("#modal").html(htmlStr.join(''));
        $("#publish-modal").modal({closeViaDimmer: 0});
    }
    /**
     * 滑动
     */
    function startSlider() {
        mySwiper = new Swiper('.shoplist', {
            slideElement: 'li',
            onSlideChangeStart: function () {
                //滑动触发的事件
            }
        });
    }
    /**
     * 添加商家选项卡
     * @param mid 商家ID
     * @param name 商家名称
     * @param address 商家地址
     * @param tel 电话
     * @param grab 已经抢单数
     * @param longitude 经度
     * @param latitude 纬度
     * @param stars 星级
     */
    function addShop(mid, name, address, tel, grab, longitude, latitude, stars) {
        var distance = getDistance(latitude, longitude, demand.latitude, demand.longitude);
        var htmlStr = [];
        htmlStr.push('<div class="am-u-sm-11 am-u-sm-centered mask-r-white">');
       。。。。。。//组装相关弹框代码
        htmlStr.push('</div>');
        mySwiper.appendSlide(htmlStr.join(''));
        var newSlide = mySwiper.getLastSlide();
        newSlide.clone().prepend(); //添加到最前面
        mySwiper.removeLastSlide(); //移除最后一个slide
    }
    /***
     *  定它下单
     */
    function order(mid, name, address) {
        var htmlStr = ['<div class="am-modal am-modal-no-btn" tabindex="-1" id="order-modal">'];
        htmlStr.push('确认定TA');
       。。。。。。//组装相关弹框代码
        htmlStr.push('</button></div></div>');
        $("#o-modal").html(htmlStr.join(''));
        $("#order-modal").modal({closeViaDimmer: 0});
    }

页面加载之后获取当然的经纬度，地址，创建地图，顺便组装发布需求时所需要的demand对象，登录openfire，登录的用户名密码，直接从PHP变量分配得来。页面使用的是amazeui框架

demand插件：

Demand = {
    NameSpaces: {
        Demand: 'jabber:iq:demand'//命名空间
    },
    Actions: {
        confirm: 'confirm',
        cancel: 'cancel',
        resultdemand: 'resultdemand',
        verify: 'verify'
    }
};
Strophe.addConnectionPlugin('demand',
    {
        _connection: null,

        count: null,

        _feedbackCallback: [],

        _grabCallback: [],

        _verifyCallback: [],

        loadPageB: 0,

        Receive: 0,

        DemandId: 0,

        init: function (conn) {
            this._connection = conn;
            Strophe.addNamespace('demand', Demand.NameSpaces.Demand);
            conn.addHandler(this._onFeedback.bind(this), Demand.NameSpaces.Demand, 'iq', 'result', null, null);
        },

        /**
         * 注册方法
         * @param type 类型
         * @param call_back 回调
         */
        registerCallback: function (type, call_back) {
            if (type === 1) {
                this._feedbackCallback.push(call_back);
            } else if (type === 2) {
                this._grabCallback.push(call_back);
            } else if (type === 3) {
                this._verifyCallback.push(call_back);
            }
        },

        /**
         * 回调
         */
        _call_backs: function (type, data) {
            if (type === 1) {
                for (var i = 0; i < this._feedbackCallback.length; i++) {
                    this._feedbackCallback[i](data);
                }
            } else if (type === 2) {
                for (var i = 0; i < this._grabCallback.length; i++) {
                    this._grabCallback[i](data);
                }
            } else if (type === 3) {
                for (var i = 0; i < this._verifyCallback.length; i++) {
                    this._verifyCallback[i](data);
                }
            }
        },

        /**
         * 处理返回结果
         * @param iq
         * @returns {null}
         * @private
         */
        _onFeedback: function (iq) {
            log('RECV:' + iq.innerHTML);
            var node = iq.getElementsByTagName('demand')[0];
            if (node) {
                var action = node.getAttribute('action');
                switch (action) {
                    case Demand.Actions.resultdemand:
 　　　　　　　　　　　　　　　 //解析IQ代码省略
                       this._call_backs(1, node);
                        break;
                    case Demand.Actions.confirm:
　　　　　　　　　　　　　　　　　//过滤代码省略
                       var jid = fromJid.split('_')[0];
                            var self = this;
                            $.ajax({
                                type: 'POST',
                                url: '/service/merchant/merchantInfo',
                                data: {mid: jid},
                                success: function (data) {
                                    if (data.status == 1) {
                                        self.loadPageB++;
                                        self._call_backs(2, data.data);
                                    } else {
                                        alert(data.info);
                                    }
                                }
                            });
                        }
                        break;
                    case  Demand.Actions.verify:
                        this._call_backs(3, node);
                        break;
                }
            }
            return true;
        }
    });