js websocket斷開重連
阿新 • • 發佈:2020-10-14
js websocket斷開重連例項程式碼,請根據自己需求做出相應改動
var socket; //websocket的例項 var lockReconnect = false; //避免重複連線 function getwebsocket() { //新建websocket的函式 頁面初始化 斷開連線時重新呼叫 var wsUrl = 'ws://10.200.101.121:9001/websocket?wsToken=' + window.token + '&djxh=' + window.djxh; socket = new WebSocket(wsUrl); socket.onerror = function(event) { //console.log('websocket服務出錯了'); reconnect(wsUrl); }; socket.onclose = function(event) { //console.log('websocket服務關閉了'); reconnect(wsUrl); }; socket.onopen = function(event) { heartCheck.reset().start(); //傳遞資訊 }; socket.onmessage = function(event) { //如果獲取到訊息,心跳檢測重置 //拿到任何訊息都說明當前連線是正常的 //console.log('websocket服務獲得資料了'); //接受訊息後的UI變化 doWithMsg(event.data); heartCheck.reset().start(); }; //收到訊息推送 function doWithMsg(msg) { getdjxh()//這個函式是業務上面申請列表的函式 可以忽略 window.external.CallFun('receiveMsg');//這個也是 } } function reconnect(url) { if (lockReconnect) return; lockReconnect = true; //沒連線上會一直重連,設定延遲避免請求過多 setTimeout(function() { getwebsocket(); lockReconnect = false; }, 2000); } //心跳檢測 var heartCheck = { timeout: 60000, //60秒 timeoutObj: null, serverTimeoutObj: null, reset: function() { clearTimeout(this.timeoutObj); clearTimeout(this.serverTimeoutObj); return this; }, start: function() { var self = this; this.timeoutObj = setTimeout(function() { //這裡傳送一個心跳,後端收到後,返回一個心跳訊息, //onmessage拿到返回的心跳就說明連線正常 socket.send("心跳測試"); self.serverTimeoutObj = setTimeout(function() { //如果超過一定時間還沒重置,說明後端主動斷開了 socket.close(); //如果onclose會執行reconnect,我們執行ws.close()就行了.如果直接執行reconnect 會觸發onclose導致重連兩次 }, self.timeout) }, this.timeout) } }