前端对接WebSocket与心跳重连实现
作者:东北小狐狸
这篇文章主要为大家介绍了前端对接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);/**启动连接**/ });
结束
这些代码是我半年前写的做的整理,断线重连是从这篇博客博客中学到的
以上就是前端对接WebSocket与心跳重连实现的详细内容,更多关于前端对接WebSocket心跳重连的资料请关注脚本之家其它相关文章!