你的位置:首页 > Java教程

[Java教程]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 tabindex="-1" id="cancel-modal">');168       htmlStr.push('<img src="__PUBLIC__/web/demand/close_td.png" alt="关闭" />');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 tabindex="-1" id="publish-modal">'];183     。。。。。。//组装相关弹框代码184     htmlStr.push('<button type="button" data-am-modal-close onclick="releasedemand();" >');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 >');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 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) { 46         this._feedbackCallback.push(call_back); 47       } else if (type === 2) { 48         this._grabCallback.push(call_back); 49       } else if (type === 3) { 50         this._verifyCallback.push(call_back); 51       } 52     }, 53  54     /** 55      * 回调 56     */ 57     _call_backs: function (type, data) { 58       if (type === 1) { 59         for (var i = 0; i < this._feedbackCallback.length; i++) { 60           this._feedbackCallback[i](data); 61         } 62       } else if (type === 2) { 63         for (var i = 0; i < this._grabCallback.length; i++) { 64           this._grabCallback[i](data); 65         } 66       } else if (type === 3) { 67         for (var i = 0; i < this._verifyCallback.length; i++) { 68           this._verifyCallback[i](data); 69         } 70       } 71     }, 72  73     /** 74      * 处理返回结果 75      * @param iq 76      * @returns {null} 77      * @private 78     */ 79     _onFeedback: function (iq) { 80       log('RECV:' + iq.innerHTML); 81       var node = iq.getElementsByTagName('demand')[0]; 82       if (node) { 83         var action = node.getAttribute('action'); 84         switch (action) { 85           case Demand.Actions.resultdemand:
                //解析IQ代码省略 86 this._call_backs(1, node); 89 break; 90 case Demand.Actions.confirm:
                 //过滤代码省略 91 var jid = fromJid.split('_')[0]; 99 var self = this;100 $.ajax({101 type: 'POST',102 url: '/service/merchant/merchantInfo',103 data: {mid: jid},104 success: function (data) {105 if (data.status == 1) {106 self.loadPageB++;107 self._call_backs(2, data.data);108 } else {109 alert(data.info);110 }111 }112 });113 }114 break;115 case Demand.Actions.verify:116 this._call_backs(3, node);117 break;118 }119 }120 return true;121 }122 });