微信小程序websocket
websocket也就是长连接,使用长连接后服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,那么就可以通过这个技术做一些及时性的功能
例如:聊天室,饭店多人同时点餐等等。
前端在小程序上实现的方式很简单,如下: 代码可以放在app.js里面,通过this.globalData.socketStatus状态来判断是否开启socket
onLaunch(){ if(this.globalData.socketStatus == 'closed'){ this.openSocket(); } }
微信小程序websocket方法基本就在这块js里面,不懂得仔细看注释或者去官方文档查看 https://developers.weixin.qq.com/miniprogram/dev/api/network/websocket/wx.sendSocketMessage.html
// websocket openSocket() { // 打开信道 wx.connectSocket({ url: this.globalData.socketUrl, //后台给你的长连接地址,定义在globalData中 header:{'content-type': 'application/json'}, }) //打开时的动作 wx.onSocketOpen(() => { console.log('WebSocket 已连接'); this.globalData.socketStatus = 'connected'; //将状态更换成已连接 let msg = { user: '张三' } if (this.globalData.socketStatus === 'connected') { //自定义的发给后台识别的参数 console.log("sendMsg:",msg) wx.sendSocketMessage({ data: JSON.stringify(msg) }) } }) //断开时的动作 wx.onSocketClose(() => { console.log('WebSocket 已断开'); this.globalData.socketStatus = 'closed'; }) //报错时的动作 wx.onSocketError(error => { console.error('socket error:', error) }) // 监听服务器推送的消息 wx.onSocketMessage(message => { //把JSONStr转为JSON message = message.data.replace(" ", ""); if (typeof message != 'object') { message = message.replace(/\ufeff/g, ""); //重点,后台返回来的数据类型需要转成字符串然后再JOSN.parse转成json var msg = JSON.parse(message); message = msg; } var pages = getCurrentPages().pop(); //获取到当前页面 if (pages.onMessage){ //当前页面是否有onMessage方法,如果有就执行,实时获取后台返回的数据 pages.onMessage(message); } }) },
index.js中可通过onMessage方法获取实时数据
onMessage(message){ console.log('getMsg:',message) },
index.js中发送数据使用 wx.sendSocketMessage方法
// webscoket发送数据 sendMessage() { let msg = { name: '李四' } if (app.globalData.socketStatus === 'connected') { //自定义的发给后台识别的参数 console.log("sendMsg:",msg) wx.sendSocketMessage({ //发送 data: JSON.stringify(msg) }) } },