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的條件依據
}，