首页 前端知识 Js WebSocket类,收发Json,带心跳,断线重连

Js WebSocket类,收发Json,带心跳,断线重连

2024-05-31 19:05:42 前端知识 前端哥 197 588 我要收藏

如题
心跳:4秒发一次
断线:2秒后自动重连
收发:发送和返回json,处理粘包断包等情况,json字符串最大长度9999
缓存:未连接时,自动缓存100个包,当连接时会自动发出

JS代码

var MyWebSocket = {
	ws : null,
	isConnected : false,
	
	strLast : "",
	
	isDebug : true,
	
	url : "",
	
	//ms
	reconnectTimeout : 2000,
	
	sendBuffMaxSize : 100,
	arrSendBuff : [],
	
	timer : 0,
	
	connect : function(url)
	{
		this.url = url;
		
		var that = this;
		
		if( this.ws != null )
		{
			this.ws.onopen = null;
			this.ws.onmessage = null;
			this.ws.onclose = null;
			this.ws.onerror = null;
		}
		
		if( this.timer==0 )
		{
			timer = setInterval( this.heart, 4000, this );
		}
		
		this.ws = new WebSocket(url);
		
		this.ws.onopen = function()
		{
			that.isConnected = true;
			
		  //当WebSocket创建成功时,触发onopen事件
			that.log("open");
		  
			that.ws.send("0002{}"); //将消息发送到服务端
		
			that.sendBuffJson();
		}
		
		this.ws.onmessage = function(e)
		{
		  that.log(e.data);
		
			that.strLast += e.data;
			
			var strlen = that.strLast.length;
			if( strlen > 4 )
			{
				var len = parseInt( "0x" + that.strLast.substr(0, 4));
				if( len+4 <= strlen )
				{
					var s = that.strLast.substr(4, len+4);
					
					that.strLast = that.strLast.substr(len+4);
					
					that.log("msg come");
					that.log(s);
					
					if( that.onMsgCome != null )
					{
						this.onMsgCome(JSON.parse(s));
					}
				}
			}
		}
		this.ws.onclose = function(e)
		{
		  //当客户端收到服务端发送的关闭连接请求时,触发onclose事件
		  that.log("close");
		
			that.isConnected = false;
			
			that.reconnect();
		}
		this.ws.onerror = function(e){
		  //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
		  that.log(error);
		}
	},
	
	reconnect : function()
	{
		if( this.reconnectTimeout > 0 )
		{
			setTimeout(this.doReconnect, this.reconnectTimeout, this);
		}
		else this.doReconnect(this);
	},
	
	doReconnect : function(that)
	{
		that.connect(that.url);
	},
	
	sendBuffJson : function()
	{
		var len = this.arrSendBuff.length;
		for( var i=0; i<len; i++ )
		{
			var json = this.arrSendBuff[i];
			
			this.send(json);
		}
		return len;
	},
	
	heart : function(that)
	{
		if( !that.isConnected ) return;
		
		that.timerNum++;
		if( that.timerNum > that.sendNum )
		{
			that.log("heart");
			that.ws.send("0000");
		}
	},
	
	timerNum : 1,
	sendNum : 1,
	
	send : function(json)
	{
		if( !this.isConnected )
		{
			if( this.arrSendBuff.length < this.sendBuffMaxSize )
			{
				this.arrSendBuff.push(json);
			}
			
			return;
		}
		
		this.sendNum = this.timerNum + 1;
		
		var s = JSON.stringify(json);
		
		var prev = "0000" + s.length.toString(16);
		prev = prev.substr(prev.length-4);
		
		s = prev + s;
		
		this.ws.send(s);
	},
	
	log : function(s)
	{
		if( this.isDebug ) console.log(s);
	},
	
	//信息回调回调函数
	onMsgCome : null,
}

测试代码

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title>MyWebSocket</title>
</head>
<script type="text/javascript"> 

</script>
<body>
	<script src="MyWebSocket.js"></script>

	<script>
		var mw = Object.create(MyWebSocket);
		mw.connect("ws://127.0.0.1:8888");
		
		mw.onMsgCome = function(json)
		{
			console.log(json);
		}
		
		setInterval(xx, 3000);
		
		function xx()
		{
			var json = {};
			json.url = "xx";
			json.data = {};
			mw.send(json);
		}
	</script>

</body>

</html>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10218.html
标签
websocket
评论
发布的文章

JSON&yaml和Properties

2024-06-06 10:06:54

JavaScript中的JSON.stringify()

2024-06-06 10:06:52

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!