我們在是有websocekt的時候，有的時候由於某些原先websocket會斷開連線，我們需要重現連線，該如何實現呢？這就需要我們仔細研究websocket的api的使用了。

首先我們要熟悉如下幾個api

1、連線websocket的伺服器的websocekt函式

2、websocekt斷開後觸發的onclose函式

由上面這兩個函式就可以了，大致思路梳理一下：

1、首先開發一個函式websocketinit，函式主要是websocket的連線邏輯，監聽資訊，傳送資訊

2、監聽onclose事件，onclose觸發後重新執行websocketinit事件

思路有了大致程式碼如下：

  function webSocketInit(service){
   
 
//1、初始化ws
   //2、監聽onclose事件 重新執行websocketInit函式
  }

具體程式碼如下：

//1.建立websocket客戶端
var host = window.location.host; #IP
var ut = "{{ ut }}";
var wsServer = 'wss://' + host + '/notify/wxlogin?ut=' + ut;

var timeConnect = 0;
webSocketInit(wsServer);

//socket初始化
function webSocketInit(service) {
    var ws = new WebSocket(service);
    ws.onopen 
 
= function () {
        console.log("已連線TCP伺服器");
        ws.send('Hello WebSockets!');

    };
    ws.onmessage = function (evt) {
        console.log('Received Message: ' + evt.data);

        data = JSON.parse(evt.data);
        console.log(data);
        if (data.status != 0) {
            alert(
 
"掃碼錯誤");
            ws.close();
        }
        if (data.data.wx_login == 1) {
            //window.location.href = "http://" + host + "/admin"
            window.location.href = "/admin"

        }
        if (data.data.wx_login == 0) {
            //alert(data.data.message)
            $(".qr_code").css("display", "none");
            $(".tips").text(data.data.message)

        }
        console.log(data.data);
    };

    ws.onclose = function () {
        console.log('伺服器已經斷開');
        reconnect(service);
    };
}

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

}


// 心跳 * 迴應
setInterval(function () {
    var websocket = new WebSocket(wsServer);
    websocket.send('');

}, 1000 * 100)