1. 程式人生 > >websocket 斷開重連

websocket 斷開重連

websocket 5行程式碼模子:
1.例項化WebSocket物件
   var old=new WebSocket("ws://xxx.xxxxx.xxx.xxxx");
2.回撥事件的處理
  old.onerror = function(){}
  old.onopen = function(){}
  old.onmessage=function(evt){}
  old.onclose=function(){}
  
 
 WebSocket斷開或斷網情況下用以下方法嘗試重連但無效
 //連線關閉的回撥方法
 old.close=function(){
    //alert("flow.html:WebSocket失效連線關閉");
    console.lgo("flow.html:WebSocket失效連線關閉");
    
    //1. reload方法,該方法強迫瀏覽器重新整理當前頁面(可行,但拙)
    window.location.reload();
    
    //2.重新new(不可行)
    //xin=new WebSocket("ws://xxxx.xxxxx.xxx.xxxx");
    //old = null;
    //old = xin;
 }
 
 github上找到個重連包
 https://github.com/joewalnes/reconnecting-websocket 
 reconnecting-websocket.js 
 reconnecting-websocket.min.js
 
 //引入
 <script type="text/javascript" src="xxxx/reconnecting-websocket.js"></script>
 //開啟一個websocket,自動提交表單到後臺controller,以繫結client_id
 var url ="ws://xxx.xxxxx.xxx.xxxx";
 //var old = new WebSocket(url);
 var old=new ReconnectingWebSocket(url);
 old.debug = true;
 old.timeoutInterval = 5400;
 以上寫法會不定時長斷開
 
 心跳包重連
 http://www.voidcn.com/article/p-zshodvff-mm.html 
 http://www.voidcn.com/article/p-trguhbme-bnu.html 
 斷線重連?
 
 心跳包重連CODE
 ===========================================心跳包重連CODE START===============================================
 var lockReconnect = false; //避免ws重複連線
 var ws=null; //判斷當前瀏覽器是否支援WebSocket
 var wsUrl = "ws://xxx.xxxxx.xxx.xxxx";
 createWebSocket(wsUrl); //連線ws
 
 function createWebSocket(url){
    try{
        if('WebSocket' in window){
            ws=new WebSocket(url);
        }else if ('MozWebSocket' in window){
            ws = new MozWebSocket(url);
        }else{
           layui.use([''],function(){
             var layer = layui.layer;
             layer.alert("您的瀏覽器不支援websocket協議,建議使用新版谷歌、火狐等瀏覽器,請勿使用IE10以下瀏覽器,360瀏覽器請使用極速模式,不要使用相容模式!")
           
           });
        
        }
        initEventHandle();
    }catch (e){
      reconnect(url);
      console.log(e);
    }
 }
 
 
 function initEventHandle(){
    ws.onclose = function(){
       console.log("llws連線關閉!"+new Date().toUTCString());
       reconnect(wsUrl);
    };
    ws.onerror = function(){
       console.log("llws連線錯誤!");
       reconnect(wsUrl);
    };
    
    ws.onopen = function(){
      heartCheck.reset().start(); //心跳檢測重置
      console.log("llws連線成功!"+new Date().toUTCString());
    };
    ws.onmessage = function(event){//如果獲取到訊息,心跳檢測重置
       heartCheck.reset().start(); //拿到任何訊息都說明當前連線是正常的
       var eventData = event.data;
       handMsg(eventData);
    };    
 }
 
 //監聽視窗關閉事件,當視窗關閉時,主動去關閉WebSocket連線,防止連線還沒斷開就關閉視窗,server端後丟擲異常
 window.onbeforeunload=function(){
    ws.close();
 }
 
 function reconnect(url){
    if(lockReconnect) return;
    lockReconnect = true;
    setTimeout(function(){ //沒連線上會一直重連,設定延遲避免請求過多
       createWebSocket(url);
       lockReconnect = false;
    },2000);
 }
 
 
 //心跳檢測
 var heartCheck = {
    //timeout:540000, //9分鐘發一次心跳
    //timeout:3600,//1分鐘發一次心跳
    timeout:10800,//3分鐘發一次心跳
    timeoutobj:null,
    serverTimeoutObj:null,
    reset:function(){
      clearTimeout(this.timeoutObj);
      clearTimeout(this.TimeoutObj);
      return this;
    },
    start:function(){
       var self=this;
       this.timeoutObj = setTimeout(function(){
         //這裡傳送一個心跳,後端收到後,返回一個心跳資訊
         //onmessage拿到返回的心跳就說明連線正常
         ws.send("ping");
         console.log("ping!");
         self.serverTimeoutObj=setTimeout(function(){
              //如果超過一定時間還沒重置,說明後端主動斷開了
              //如果onclose會執行reconnect,我們執行ws.close()就行了,如果直接執行reconnect會觸發onclose導致重連兩次
              ws.close();
         },self.timeout)   
       },this.timeout)
    }
 }
 
 ======================================心跳包重連code end===============================
 
 //處理訊息
 function handMsg(evtdata){}