websocket 斷線重連

服務端為swoole 的websocket

客戶端js代碼：

//1.創建websocket客戶端
  var wsServer = 'ws://ip/';
  var limitConnect = 3;  // 斷線重連次數
  var timeConnect =0;
  webSocketInit(wsServer);

  //socket初始化
  function webSocketInit(service){
    var ws = new WebSocket(service);
    ws.onopen = function () {
      console.log("已連接TCP服務器");
    };
    ws.onmessage = function (msg) {
      console.log(msg);
    };
    ws.onclose = function () {
      console.log('服務器已經斷開');
      reconnect(service);
    };
    ws.onerror = function (err) {
      //console.log("服務器報錯：");
      reconnect(service);
    };

    // 重連
    function reconnect(service) {
      // lockReconnect加鎖，防止onclose、onerror兩次重連
      if(limitConnect>0){
        if(localStorage.getItem('lockReconnect')!=true){
          localStorage.setItem("lockReconnect",1);
          limitConnect --;
          timeConnect ++;
          console.log("第"+timeConnect+"次重連");
          // 進行重連
          setTimeout(function(){
            webSocketInit(service);
            localStorage.removeItem("lockReconnect");
          },2000);
        }
      }else{
        console.log("TCP連接已超時");
      }
    }

    // 心跳 * 回應
    setInterval(function(){
      websocket.send('');
    }, 1000*100);

注意：

1.onclose、onerror出現兩個，tcp重連的時候會重連兩次；為避免這種情況，需要進行加鎖lockReconnect

2.limitConnect 斷線重連次數；timeConnect從0次開始播報

效果：

 

 

完整代碼：去掉了onerror，不需要加鎖

//1.創建websocket客戶端
  var wsServer = 'ws://ip/';
  var limitConnect = 3;  // 斷線重連次數
  var timeConnect = 0;
  webSocketInit(wsServer);

  //socket初始化
  function webSocketInit(service){
    var ws = new WebSocket(service);
    ws.onopen = function () {
      console.log("已連接TCP服務器");
    };
    ws.onmessage = function (msg) {
      console.log(msg);
    };
    ws.onclose = function () {
      console.log('服務器已經斷開');
      reconnect(service);
    };

    // 重連
    function reconnect(service) {
      // lockReconnect加鎖，防止onclose、onerror兩次重連
      if(limitConnect>0){
          limitConnect --;
          timeConnect ++;
          console.log("第"+timeConnect+"次重連");
          // 進行重連
          setTimeout(function(){
            webSocketInit(service);
          },2000);

      }else{
        console.log("TCP連接已超時");
      }
    }

    // 心跳 * 回應
    setInterval(function(){
      websocket.send('');
    }, 1000*100);

 

作者：狂奔的蝸牛，轉載請注明出處