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();
						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()
			},

成功事例図