ws.onclose = function (e) {
  console.log('websocket 斷開: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
  console.log(e)
}

var lockReconnect = false;  //避免ws重復(fù)連接
var ws = null;          // 判斷當(dāng)前瀏覽器是否支持WebSocket
var wsUrl = serverConfig.socketUrl;
createWebSocket(wsUrl);   //連接ws

function createWebSocket(url) {
    try{
        if('WebSocket' in window){
            ws = new WebSocket(url);
        }
        initEventHandle();
    }catch(e){
        reconnect(url);
        console.log(e);
    }     
}

function initEventHandle() {
    ws.onclose = function () {
        reconnect(wsUrl);
        console.log("llws連接關(guān)閉!"+new Date().toLocaleString());
    };
    ws.onerror = function () {
        reconnect(wsUrl);
        console.log("llws連接錯(cuò)誤!");
    };
    ws.onopen = function () {
        heartCheck.reset().start();      //心跳檢測(cè)重置
        console.log("llws連接成功!"+new Date().toLocaleString());
    };
    ws.onmessage = function (event) {    //如果獲取到消息，心跳檢測(cè)重置
        heartCheck.reset().start();      //拿到任何消息都說(shuō)明當(dāng)前連接是正常的
        console.log("llws收到消息啦:" +event.data);
        if(event.data!='pong'){
            let data = jsON.parse(event.data);
        }
    };
}
// 監(jiān)聽窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時(shí)，主動(dòng)去關(guān)閉websocket連接，防止連接還沒(méi)斷開就關(guān)閉窗口，server端會(huì)拋異常。
window.onbeforeunload = function() {
    ws.close();
}  

function reconnect(url) {
    if(lockReconnect) return;
    lockReconnect = true;
    setTimeout(function () {     //沒(méi)連接上會(huì)一直重連，設(shè)置延遲避免請(qǐng)求過(guò)多
        createWebSocket(url);
        lockReconnect = false;
    }, 2000);
}

//心跳檢測(cè)
var heartCheck = {
    timeout: 1000,        //1分鐘發(fā)一次心跳
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function(){
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        return this;
    },
    start: function(){
        var self = this;
        this.timeoutObj = setTimeout(function(){
            //這里發(fā)送一個(gè)心跳，后端收到后，返回一個(gè)心跳消息，
            //onmessage拿到返回的心跳就說(shuō)明連接正常
            ws.send("ping");
            console.log("ping!")
            self.serverTimeoutObj = setTimeout(function(){//如果超過(guò)一定時(shí)間還沒(méi)重置，說(shuō)明后端主動(dòng)斷開了
                ws.close();     //如果onclose會(huì)執(zhí)行reconnect，我們執(zhí)行ws.close()就行了.如果直接執(zhí)行reconnect 會(huì)觸發(fā)onclose導(dǎo)致重連兩次
            }, self.timeout)
        }, this.timeout)
    }
}
    // 收到客戶端消息后調(diào)用的方法 
    @OnMessage  
    public void onMessage(String message, Session session) {  
        if(message.equals("ping")){
        }else{
        。。。。
        }
   }