小程序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的条件依据

}，

小程序webSocket使用心得

相关推荐