【簡記】前端對接WebSocket與心跳重連

前言

最近又在忙着開發別的模塊，其中包含了即時通訊這一塊，上一次做即時通訊時還是去年年底，一時間代碼都在自己的筆記本里，還沒帶……這里就記錄一下前端對接WebSocket的實現，包含心跳重連，簡記之。

實現

在確定前端使用的環境是支持H5的情況下，可以直接使用WebSocket，如果不確定，前端Html需引入sockjs，<script src="//cdn.jsdelivr.net/sockjs/1.0.0/sockjs.min.js"></script>，注意要在后端開放Sockjs的url的支持

$(function() {
	var lockReconnect = false;//避免重復連接
	var ws = null; //WebSocket的引用
	var wsUrl = "xxxxxx"; //這個要與后端提供的相同
	//創建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;
        //沒連接上會一直重連，設置延遲避免請求過多
        setTimeout(function () {
            createWebSocket(wsUrl);
            console.log("正在重連，當前時間"+new Date())
            lockReconnect = false;
        }, 5000); //這里設置重連間隔(ms)
    }
	
	 /*********************初始化開始**********************/
	function initEventHandle() {
		// 連接成功建立后響應
		ws.onopen = function() {
			console.log("成功連接到" + wsUrl);
			//心跳檢測重置
			heartCheck.reset().start();
		}
		// 收到服務器消息后響應
		ws.onmessage = function(e) {
			//如果獲取到消息，心跳檢測重置
            //拿到任何消息都說明當前連接是正常的
            heartCheck.reset().start();
            //Json轉換成Object
            var msg = eval('(' + e.data + ')');
            
            if(msg.message == "heartBeat"){
            	//忽略心跳的信息，因為只要有消息進來，斷線重連就會重置不會觸發
            }else{
            	//處理消息的業務邏輯
            }
        }

		// 連接關閉后響應
		ws.onclose = function() {
			console.log("關閉連接");
			reconnect(wsUrl);//重連
		}
		ws.onerror = function () {
			reconnect(wsUrl);//重連
		};
	} 
	/***************初始化結束***********************/
	 //心跳檢測
    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(){
                //這里發送一個心跳，后端收到后，返回一個心跳消息，
                //onmessage拿到返回的心跳就說明連接正常
                ws.send("HeartBeat");
                console.log("HeartBeat");
                self.serverTimeoutObj = setTimeout(function(){//如果超過一定時間還沒重置，說明后端主動斷開了
                    ws.close();//如果onclose會執行reconnect，我們執行ws.close()就行了.如果直接執行reconnect 會觸發onclose導致重連兩次
                }, self.timeout)
            }, this.timeout)
        }
    }

// 發送字符串消息

	$("#sendBtn").click(function() {
		if (ws.readyState ==1) {
			//自定義消息串，讓后端接收
			ws.send("xxxxxx");
		}else{
			alert("當前連接超時，請刷新重試!");
		}
		return false;
	});

	// 強制退出
	window.onunload = function() {
		ws.close();
	}
	createWebSocket(wsUrl);/**啟動連接**/
});

結束

這些代碼是我半年前寫的做的整理，斷線重連記得是@子慕大詩人的博客中學到的

這里僅做記錄，如有雷同不勝榮幸