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);
         }
     });     /**
      * 获取当前位置
      */
     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);
         //添加地图控件和事件     }
     /**
      * 获取位置
      * @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++) {
                            //地图标注                         }
                     } 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) {
                        //成功处理                     }
                 });
             }
         }
     }
     /**
      * 返回
      */
     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;width: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;
         }
     });