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

作者：码创造者 | 2024-07-26 06:58:00

踩

websocket json

如题
心跳：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,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

测试代码

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/884055