app.js
let socketMsgQueue = [] let isLoading = false App({ globalData: { userInfo: null, localSocket: {}, callback: function () {} }, showLoad() { if(!isLoading) { wx.showLoading({ title: \'请稍后...\', }) isLoading = true } }, hideLoad() { wx.hideLoading() isLoading = false }, initSocket() { let that = this that.globalData.localSocket = wx.connectSocket({ // url: \'wss://test.enzhico.net/app\' url: \'wss://mapp.enzhico.net/app\' }) that.showLoad() that.globalData.localSocket.onOpen(function (res) { console.log(\'WebSocket连接已打开!readyState=\' + that.globalData.localSocket.readyState) that.hideLoad() while (socketMsgQueue.length > 0) { var msg = socketMsgQueue.shift(); that.sendSocketMessage(msg); } }) that.globalData.localSocket.onMessage(function(res) { that.hideLoad() that.globalData.callback(res) }) that.globalData.localSocket.onError(function(res) { console.log(\'readyState=\' + that.globalData.localSocket.readyState) }) that.globalData.localSocket.onClose(function (res) { console.log(\'WebSocket连接已关闭!readyState=\' + that.globalData.localSocket.readyState) that.initSocket() }) }, //统一发送消息 sendSocketMessage: function (msg) { if (this.globalData.localSocket.readyState === 1) { this.showLoad() this.globalData.localSocket.send({ data: JSON.stringify(msg) }) } else { socketMsgQueue.push(msg) } }, onShow: function(options) { if (this.globalData.localSocket.readyState !== 0 && this.globalData.localSocket.readyState !== 1) { console.log(\'开始尝试连接WebSocket!readyState=\' + this.globalData.localSocket.readyState) this.initSocket() } } })
page 页面
/** * 生命周期函数--监听页面显示 */ onShow: function () { var that = this app.globalData.callback = function (res) { //res 接收websocket onMessage事件返回的数据
} }
//向服务器发送数据
app.sendSocketMessage(data: JSON.stringify({});
)
SocketTask
这个对象是通过wx.connetSocket(obj)来获取的,他有一个属性值readyState,有4个状态值:
1 CONNECTING:0 连接中
2 OPEN:1 已连接
3 CLOSING:2 关闭中
4 CLOSED:3 已关闭
刚开始我们使用的做法是全局一个变量socketOpen,用来表示这个socket是否打开,没有打开就重连,否则就直接调用发送消息接口了。但是经过测试发现网络不稳定,会出现这个变量没有得到及时更新一直是true。然后就不再去连接了,但实际上已经断开了
所以最后就把这个socketOpen变量去掉,直接判断SocketTask对象的属性值readyState,如果是1的话就表示直接可用;
基本思路:
1 全局维护一个SocketTask对象,用来表示websocket连接,小程序onShow时判断是否断线,是否需要重连
2 同时定义一个全局的回调函数callback回调函数,每个页面初始化的时候更新这个回调函数,那么每个页面中收到的返回信息就会执行当前页面逻辑
3 维护一个消息队列,所有的消息请求会首先判断连接是否可用,可用直接send,不可用将消息push到这个队列中。
4 在app.js的onShow函数中判断连接是否连上,如果没有连上就会触发websocket连接
5 SocketTask对象的onOpen()负责从消息队列中取出请求消息,并发送这个请求消息
6 SocketTask对象的onMessage() 负责接收返回消息。并调用每个页面自己定义的回调函数
7 SocketTask对象的onClose() 监听函数中,触发websocket连接
来自:https://blog.csdn.net/h_a_h_ahahah/article/details/80645939