webSocket使用心跳包實現斷線重連

首先new一個webscoket的連接

let noticeSocketLink = new WebSocket(‘webSocket的地址’)

這里是連接成功之后的操作

linkNoticeWebsocket(){

        noticeSocketLink.onopen = ()=>{

　　  //在連接成功打開的時候調用斷線重連的函數,傳入websocket對象 

          webCloseLink(noticeSocketLink)

        }

        this.noticeSocketLink.onmessage = res => {
          console.log("res")
       }

        noticeSocketLink.onclose = res => {

          console.log("websocket is closed")

        }

},

//斷開連接，斷線重連的函數

webCloseLink(WebSocketId){
　　WebSocketId.send("心跳包內容")
　　// 每個15秒發送一次心跳包
　　let hb = setInterval(()=>{
　　　　WebSocketId.send("心跳包內容")
　　　　// 檢測到websocket連接斷開
　　　　if(WebSocketId.readyState == 2 || WebSocketId.readyState == 3){
　　　　　　clearInterval(this.hb)
　　　　　　let i = 1
　　　　　　let myVar = setInterval(()=>{
　　　　　　　　if(WebSocketId.readyState == 2 || WebSocketId.readyState == 3){
　　　　　　　　　　// 重新new一個websocket的連接
　　　　　　　　　　this.noticeSocketLink = new WebSocket(WebSocketId.url);
　　　　　　　　　　WebSocketId = this.noticeSocketLink;
　　　　　　　　　　if(i == 5){
　　　　　　　　　　　　clearInterval(myVar);
　　　　　　　　　　　　// location.reload();
　　　　　　　　　　　　return
　　　　　　　　　　}
　　　　　　　　　　i++
　　　　　　　　}else if(WebSocketId.readyState == 0){

　　　　　　　　}else if(WebSocketId.readyState == 1){ // websocket重連成功
　　　　　　　　　　this.linkNoticeWebsocket();
　　　　　　　　　　clearInterval(hb)
　　　　　　　　　　clearInterval(myVar)
　　　　　　　　}
　　　　　　},4*1000)
　　　　}
　　}, 15000)
},