$(function() {
	var lockReconnect = false;//避免重復(fù)連接
	var ws = null; //WebSocket的引用
	var wsUrl = "xxxxxx"; //這個要與后端提供的相同
	//創(chuàng)建WebSocket連接,如果不確定瀏覽器是否支持，可以使用socket.js做連接
	function createWebSocket(url){
		 try {
			 if ('WebSocket' in window) {
		        ws = new WebSocket("ws://" + url + "/socketServer");
		     } else {
		        ws = new SockJS("http://" + url + "/sockjs/socketServer");
		     }
	         initEventHandle();
	     } catch (e) {
	         reconnect(wsUrl);
	     }
	}
	function reconnect(url) {
        if(lockReconnect) return;
        lockReconnect = true;
        //沒連接上會一直重連，設(shè)置延遲避免請求過多
        setTimeout(function () {
            createWebSocket(wsUrl);
            console.log("正在重連，當(dāng)前時間"+new Date())
            lockReconnect = false;
        }, 5000); //這里設(shè)置重連間隔(ms)
    }
	 /*********************初始化開始**********************/
	function initEventHandle() {
		// 連接成功建立后響應(yīng)
		ws.onopen = function() {
			console.log("成功連接到" + wsUrl);
			//心跳檢測重置
			heartCheck.reset().start();
		}
		// 收到服務(wù)器消息后響應(yīng)
		ws.onmessage = function(e) {
			//如果獲取到消息，心跳檢測重置
            //拿到任何消息都說明當(dāng)前連接是正常的
            heartCheck.reset().start();
            //Json轉(zhuǎn)換成Object
            var msg = eval('(' + e.data + ')');
            if(msg.message == "heartBeat"){
            	//忽略心跳的信息，因為只要有消息進(jìn)來，斷線重連就會重置不會觸發(fā)
            }else{
            	//處理消息的業(yè)務(wù)邏輯
            }
        }
		// 連接關(guān)閉后響應(yīng)
		ws.onclose = function() {
			console.log("關(guān)閉連接");
			reconnect(wsUrl);//重連
		}
		ws.onerror = function () {
			reconnect(wsUrl);//重連
		};
	} 
	/***************初始化結(jié)束***********************/
	 //心跳檢測
    var heartCheck = {
        timeout: 15000,//毫秒
        timeoutObj: null,
        serverTimeoutObj: null,
        reset: function(){
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            return this;
        },
        start: function(){
            var self = this;
            this.timeoutObj = setTimeout(function(){
                //這里發(fā)送一個心跳，后端收到后，返回一個心跳消息，
                //onmessage拿到返回的心跳就說明連接正常
                ws.send("HeartBeat");
                console.log("HeartBeat");
                self.serverTimeoutObj = setTimeout(function(){//如果超過一定時間還沒重置，說明后端主動斷開了
                    ws.close();//如果onclose會執(zhí)行reconnect，我們執(zhí)行ws.close()就行了.如果直接執(zhí)行reconnect 會觸發(fā)onclose導(dǎo)致重連兩次
                }, self.timeout)
            }, this.timeout)
        }
    }
// 發(fā)送字符串消息
	$("#sendBtn").click(function() {
		if (ws.readyState ==1) {
			//自定義消息串，讓后端接收
			ws.send("xxxxxx");
		}else{
			alert("當(dāng)前連接超時，請刷新重試!");
		}
		return false;
	});
	// 強(qiáng)制退出
	window.onunload = function() {
		ws.close();
	}
	createWebSocket(wsUrl);/**啟動連接**/
});