什么是 websocket
1.WebSocket 是一种用于在客户端和服务器之间进行全双工通信的网络协议。它使得在单个 TCP 连接上可以进行双向通信，允许服务器主动地发送数据给客户端，同时客户端也可以向服务器发送数据。与传统的 HTTP 请求 - 响应模型不同，WebSocket 允许实时通信，从而可以支持实时更新的应用程序，如即时聊天、大屏数据推送。
2.WebSocket 协议通过建立持久化的连接，避免了 HTTP 请求的额外开销和延迟。客户端可以使用 WebSocket API 与服务器建立连接，并通过发送和接收消息进行通信。WebSocket 还支持一些高级功能，如心跳检测、数据压缩和扩展。
3. 本文是在可视化数据大屏中使用进行的一些操作, 目前主要应用于大屏工具中

//webScoket 初始化方法

data(){
   return{
         websocket: {},//连接后端的地址(这里要替换成自己后端的连接地址)
         websocketUrl: 'ws://192.168.1.14:2000/',//判断是否重新连接
         lockReconnect: false,
}
}//自己在data  里面定义这些参数
		webScoketInit() {
			var that = this;
			that.websocket = new WebSocket(that.websocketUrl);
			//连接发生错误的回调方法
			that.websocket.onerror = function (event) {
				//尝试重新连接
				reconnect(that.websocketUrl);
				console.log(event);
				console.log('连接错误')
			};

			//连接成功建立的回调方法
			that.websocket.onopen = function (event) {
				//心跳检测重置
				heartCheck.reset().start();
				console.log(event,'成功数据');
				console.log('连接开启')
			}


			//接收到消息的回调方法
			that.websocket.onmessage = function (event) {
				//心跳检测重置
				let res = event.data
				//获取到后台发送的数据并转为json类型可转可不转 转了可能报错请根据自身情况修改
				//接收的后端返回数据
				console.log(res, '==============websocks')
		//进行业务处理 大数据可视化需要刷新页面
				if(res=="reload"){
					that.websk()
				}
				heartCheck.reset().start();
				
				
				
				
			}

			//连接关闭的回调方法
			that.websocket.onclose = function (event) {
				//尝试重新连接
				reconnect(that.websocketUrl);
				console.log(event);
				console.log('连接关闭')
			}

			//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
			window.onbeforeunload = function () {
				closeWebSocket();
			}

			//重新连接
			function reconnect(url) {
				if (that.lockReconnect) return;
				// console.log('连接成功')
				that.lockReconnect = true;
				//没连接上会一直重连，设置延迟避免请求过多
				setTimeout(function () {
					// that.websocket = new WebSocket(url);
					that.webScoketInit(url);
					that.lockReconnect = false;
					console.log('重连中')
				}, 2000);
			}

			//心跳检测
			var heartCheck = {
				//1分钟发一次心跳,时间设置小一点较好（50-60秒之间）
				timeout: 1000,
				timeoutObj: null,
				serverTimeoutObj: null,
				reset: function () {
					clearTimeout(this.timeoutObj);
					clearTimeout(this.serverTimeoutObj);
					return this;
				},
				start: function () {
					var self = this;
					this.timeoutObj = setTimeout(function () {
						//这里发送一个心跳，后端收到后，返回一个心跳消息，
						//onmessage拿到返回的心跳就说明连接正常
						that.websocket.send("ping"); //给服务器发送ping（可自定义与后端协调）
						//如果超过一定时间还没重置，说明后端主动断开了
						self.serverTimeoutObj = setTimeout(function () {
						//如果后端没回应就自动断开在从新连接
							console.log('重新连接')
							//如果onclose会执行reconnect，我们执行socket.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
							that.websocket.close();
						}, self.timeout)
					}, this.timeout)
				}
			}

			//关闭WebSocket连接
			function closeWebSocket() {
				that.websocket.close();
			}
		},

		websk() {
			window.location.reload()
		},

成功示例图

实现原理
浏览器发出 webSocket 的连线请求，服务器发出响应，这个过程称为握手, 握手的过程只需要一次，就可以实现持久连接。

握手与连接
浏览器发出连线请求, 此时的 request 如下：

通过 get 可以表明此次连接的建立是以 HTTP 协议为基础的，返回 101 状态码。

如果不是 101 状态码，表示握手升级的过程失败了