JavaScript

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > 前端对接WebSocket心跳重连

前端对接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心跳重连的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文