前端對接WebSocket與心跳重連實(shí)現(xià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)文章
Svelte調(diào)試模式j(luò)s級別差異和細(xì)化后的體積差異詳解
這篇文章主要為大家介紹了Svelte調(diào)試模式j(luò)s級別差異和細(xì)化后的體積差異詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12await-to-js源碼深入理解處理異步任務(wù)用法示例
這篇文章主要為大家介紹了await-to-js源碼更完美處理異步任務(wù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08微信小程序 時間格式化(util.formatTime(new Date))詳解
這篇文章主要介紹了微信小程序 時間格式化(util.formatTime(new Date))詳解的相關(guān)資料,這里附實(shí)例,一目了然很容易解決,需要的朋友可以參考下2016-11-11前端加密cryptojs與JSEncrypt使實(shí)例詳解
這篇文章主要為大家介紹了前端加密cryptojs與JSEncrypt使實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08