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插件了。

  1  var demand = {};  2     demand.sid = '{$sid}';  3     demand.remark = '';  4     demand.latitude = 0;  5     demand.longitude = 0;  6     demand.isweixin = 1;  7     demand.city = '';  8     demand.location = '';  9     demand.userid = '{$userid}'; 10     demand.labelid = '{$labelid}'; 11     demand.labelname = '{$labelname}'; 12     demand.token='{$token}'; 13     var domain = '{$domain}'; 14     var source = '{$source}'; 15     $(function () { 16         $('#top_bar').hide(); 17         getLocation(); 18         if (connection == null && demand.userid != "") { 19             login(demand.userid); 20         } 21     }); 30     /** 31      * 获取当前位置 32      */ 33     function getLocation() { 34         if (navigator.geolocation) { 35             navigator.geolocation.getCurrentPosition(gpsCallback); 36         } else { 37             alert("您的浏览器不支持地理定位,请手动修改位置"); 38         } 39     } 40     /** 41      * 根据位置创建地图 42      */ 43     function gpsCallback(position) { 44         var lat = position.coords.latitude; 45         var lon = position.coords.longitude; 46         var gpsPoint = new BMap.Point(lon, lat); 47         CreateMap("allmap", lon, lat, 14); 48         //添加地图控件和事件 78     } 79     /** 80      * 获取位置 81      * @param point 经纬度 82      */ 83     function translateCallback(point) { 84         demand.longitude = lon = point.lng.toFixed(6); 85         demand.latitude = lat = point.lat.toFixed(6); 86         getmerchants(2000); 87         latlon = lat + ',' + lon; 88         $.Ajax({ 89             dataType: 'jsonp', 90             url: 'http://api.map.baidu.com/geocoder/v2/', 91             success: function (result) { 92                 demand.city = result.result.addressComponent.city; 93                 demand.location = result.result.formatted_address; 94             } 95         }); 96     } 97     /** 98      * 获取附近的商家 99      */100     function getmerchants(radius) {101         $.post("/service/demand/nearmerchant/ran/" + Math.random(),102                 {103                     userid: demand.userid,104                     sid: demand.sid,105                     longitude: demand.longitude,106                     latitude: demand.latitude,107                     radius: radius,108                     labelid: demand.labelid,109                     isweixin: '1'110                 },111                 function (data) {112                     if (data.status == 1) {113                         var result = data.data;114                         var merchants = result.merchants;115                         var temp = null;116                         for (var i = 0, len = merchants.length; i < len; i++) {117                            //地图标注126                         }127                     } else {128                         alert(data.info);129                     }130                 });131     }132     /**133      * 发布需求134      */135     function releasedemand() {136         if (demand.latitude == 0 || demand.longitude == 0) {137             alert('请打开手机定位功能,然后重新进入本页面,再进行需求发布!');138         } else {139             if ($.trim($('#remark').val()) == '') {140                 alert('请填写备注!');141             } else {142                 demand.remark = $('#remark').val();143                 $.ajax({144                     type: 'POST',145                     url: "/service/demand/release",146                     data: demand,147                     success: function (result) {148                        //成功处理156                     }157                 });158             }159         }160     }161     /**162      * 返回163      */164     function back() {165         if (connection.demand.DemandId > 0) {166             var htmlStr = [];167             htmlStr.push('<div class="am-modal am-modal-no-btn" tabindex="-1" id="cancel-modal">');168             htmlStr.push('<img src="__PUBLIC__/web/demand/close_td.png" alt="关闭" style="height:29px;width:29px;"/>');169             。。。。。。//组装相关弹框代码170             $("#cancelmodal").html(htmlStr.join(''));171             $('#cancel-modal').modal({closeViaDimmer: 0});172         }173     }174     /**175      * 弹出发出需求的模态窗口176      */177     function publishModal() {178         if (connection == null) {179             login(demand.userid);180             return false;181         }182         var htmlStr = ['<div class="am-modal am-modal-no-btn" tabindex="-1" id="publish-modal">'];183         。。。。。。//组装相关弹框代码184         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">');185         htmlStr.push('确定发布');186         htmlStr.push('</button></div></div>');187         $("#modal").html(htmlStr.join(''));188         $("#publish-modal").modal({closeViaDimmer: 0});189     }190     /**191      * 滑动192      */193     function startSlider() {194         mySwiper = new Swiper('.shoplist', {195             slideElement: 'li',196             onSlideChangeStart: function () {197                 //滑动触发的事件198             }199         });200     }201     /**202      * 添加商家选项卡203      * @param mid 商家ID204      * @param name 商家名称205      * @param address 商家地址206      * @param tel 电话207      * @param grab 已经抢单数208      * @param longitude 经度209      * @param latitude 纬度210      * @param stars 星级211      */212     function addShop(mid, name, address, tel, grab, longitude, latitude, stars) {213         var distance = getDistance(latitude, longitude, demand.latitude, demand.longitude);214         var htmlStr = [];215         htmlStr.push('<div class="am-u-sm-11 am-u-sm-centered mask-r-white">');216        。。。。。。//组装相关弹框代码217         htmlStr.push('</div>');218         mySwiper.appendSlide(htmlStr.join(''));219         var newSlide = mySwiper.getLastSlide();220         newSlide.clone().PRepend(); //添加到最前面221         mySwiper.removeLastSlide(); //移除最后一个slide222     }223     /***224      *  定它下单225      */226     function order(mid, name, address) {227         var htmlStr = ['<div class="am-modal am-modal-no-btn" tabindex="-1" id="order-modal">'];228         htmlStr.push('确认定TA');229        。。。。。。//组装相关弹框代码230         htmlStr.push('</button></div></div>');231         $("#o-modal").html(htmlStr.join(''));232         $("#order-modal").modal({closeViaDimmer: 0});233     }

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

demand插件：

  4 Demand = {  5     NameSpaces: {  6         Demand: 'jabber:iq:demand'//命名空间  7     },  8     Actions: {  9         confirm: 'confirm', 10         cancel: 'cancel', 11         resultdemand: 'resultdemand', 12         verify: 'verify' 13     } 14 }; 15 Strophe.addConnectionPlugin('demand', 16     { 17         _connection: null, 18  19         count: null, 20  21         _feedbackCallback: [], 22  23         _grabCallback: [], 24  25         _verifyCallback: [], 26  27         loadPageB: 0, 28  29         Receive: 0, 30  31         DemandId: 0, 32  33         init: function (conn) { 34             this._connection = conn; 35             Strophe.addNamespace('demand', Demand.NameSpaces.Demand); 36             conn.addHandler(this._onFeedback.bind(this), Demand.NameSpaces.Demand, 'iq', 'result', null, null); 37         }, 38  39         /** 40          * 注册方法 41          * @param type 类型 42          * @param call_back 回调 43          */ 44         registerCallback: function (type, call_back) { 45             if (type === 1) {