strophe.js 插件 XMPP openfire
浏览数：33 /
时间：2015年06月09日
参考资料：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 商家ID 204 * @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(); //移除最后一个slide 222 } 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) { 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 });
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
