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

最新推荐文章于 2024-06-09 09:18:00 发布

卡恩.鸿蒙

最新推荐文章于 2024-06-09 09:18:00 发布

阅读量1.1k

点赞数 6

分类专栏：前端html 文章标签： javascript websocket json

本文链接：https://blog.csdn.net/kael_wyh/article/details/135018787

版权

前端html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

如题
心跳：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>

卡恩.鸿蒙

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Js WebSocket类，收发Json，带心跳，断线重连

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

扫一扫

专栏目录