小程序webSocket使用心得
1：如何实现webSocket服务器断开重连，隐藏小程序或者退出小程序断开不重连
最近在做项目的时候，产品提到了这样一个需求，就是当前端和服务器端断开连接的时候，前端要每隔一定时间（5秒，10秒，15秒，30秒，60）之后与服务器尝试重连，也就是5次。如果5次重连不成功，则前端去开启setInterval定时器，手动刷新列表数据。这样做的好处其实是显而易见的。降低连接失败的风险。
当时在做这个需求的时候。考虑到一个问题：就是当我小程序隐藏或者退出的时候一样要关闭websocket，这样一来就会和服务器自动断开一样会走重连websocket的方法。因为sockTask.close和wx.onSocketClose其实是一样的，反正webSocket一旦断开了。这两个方法都会被调用。那如何区分是用户手动断开了webSocket还是因为网络不稳定而导致了websocket断开呢。下面是我的处理方法。记录下来以方便下次遇到时可以作为参考
第一步 在data里面定义几个过程中会用到的全局变量
首先需要注意一下 我在webSocket内部this指向需要先保存在一个为that的变量里，避免this指向出错
//一下这些变量 为了操作方便 我就不把他放在data对象里面
var num = 0;//这是重连的次数
var t = 5; // 这次每次重连的时间 默认为5秒之后
var setTimer = null; // 存放定时器 为了关闭用到的
var that;
data：{
automaticClose:true // 这里默认是客户端和服务器自动断开
}
第二步连接服务器和有关操作
connetWebsocket() { // wbsocket逻辑
that = this;// 保存this指向
if( webSocket ) that.closeWebSocket(); // 先关 再开 避免多次重复连接
webSocket = wx.connectSocket({
url: ‘你的服务器地址‘,
header:{
"Authorization" : getEncryToken(wx.getStorageSync(_token)), // 加密的token 这是我们的项目需要
}
})
wx.onSocketOpen(function (res) { // 打开webSocket
console.log(‘WebSocket连接已打开！‘)
})
wx.onSocketMessage(function (res) { // 接收数据
console.log(res)
})
wx.onSocketError(function(){ //这里是监听链接出错
that.readConnectWebSocket()
})
wx.onSocketClose(function (res) { //监测webSocket关闭
automaticClose && that.readConnectWebSocket() // 只有是自动断开时才开启重连 这判断挺重要
})
},
closeWebSocket(){ // 手动关闭webSocket
webSocket.close({
success(){
webSocket = null;
console.log(‘webSocket关闭成功‘)
}
})
},
readConnectWebSocket(){ // 重新连接webSocket
clearTimeout(setTimer); // 先关闭定时器
if( num <= 5 ){
num += 1; // 每次重连一次num递增1
num <= 3? t = num*5:t = t*2; // t的值每次为 5 10 15 30 60
setTimer = setTimeout(function name(params) {
that.connetWebsocket()
},t*1000)
}else{ //5次链接都失败走这里
that.startLogTimer() // startLogTimer为一个开启setInterval的函数
}
},
onShow(){
this.setData({ automaticClose:true，num：0，t:5 }) // 恢复小程序websocket默认自动断开 初始化数据
}，
onHide(){
this.setData({ automaticClose:false }) // 这一步其实是告诉小程序 这是用户手动断开websocket的, 这一步也判断是否需要重连webSocket的条件依据
}，
相关推荐
柳木木的IT 2020-11-04
joynet00 2020-09-23
wenf00 2020-09-14
蓝色深海 2020-08-16
wuychn 2020-08-16
取个好名字真难 2020-08-06
darylove 2020-06-26
shufen0 2020-06-20
Lovexinyang 2020-06-14
WangBowen 2020-06-14
firejq 2020-06-14
hjhmpl 2020-06-14
水痕 2020-06-07
guozewei0 2020-06-06
woniyu 2020-06-02
取个好名字真难 2020-06-01
guozewei0 2020-05-28
woniyu 2020-05-26