当前位置：首页 > 微信 > 正文

小程序webSocket使用心得

1：如何实现webSocket服务器断开重连，隐藏小程序或者退出小程序断开不重连

最近在做项目的时候，产品提到了这样一个需求，就是当前端和服务器端断开连接的时候，前端要每隔一定时间（5秒，10秒，15秒，30秒，60）之后与服务器尝试重连，也就是5次。如果5次重连不成功，则前端去开启setInterval定时器，手动刷新列表数据。这样做的好处其实是显而易见的。降低连接失败的风险。

小程序webSocket使用心得

当时在做这个需求的时候。考虑到一个问题：就是当我小程序隐藏或者退出的时候一样要关闭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的条件依据
 }，

上一篇
微信小程序适配iPhoneX 底部

下一篇
微信小程序开发（三）开发工具推荐VSCode

相关文章

最新文章