欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端對接WebSocket與心跳重連實(shí)現(xiàn)

 更新時間:2023年07月04日 14:33:37   作者:東北小狐貍  
這篇文章主要為大家介紹了前端對接WebSocket與心跳重連實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

前言

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

實(shí)現(xiàn)

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

$(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"){
            	//忽略心跳的信息,因?yàn)橹灰邢⑦M(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);/**啟動連接**/
});
 

結(jié)束

這些代碼是我半年前寫的做的整理,斷線重連是從這篇博客博客中學(xué)到的

以上就是前端對接WebSocket與心跳重連實(shí)現(xiàn)的詳細(xì)內(nèi)容,更多關(guān)于前端對接WebSocket心跳重連的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評論