From a6165845a11105f717a55504739a353a54bbb4a1 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Thu, 6 Jul 2023 19:39:34 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=B8=E6=9C=BAws=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                     |  3 ++-
 src/components/Debug.vue | 66 +++++++++++++++++++++++++++++++++++++++++++++---
 src/utils/websocket.js   |  2 +-
 3 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/.env b/.env
index a3f408e..b2590cf 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,3 @@
 VITE_BASE_URL=http://192.168.1.111:8899
-VITE_WEBSOCKET_URL=ws://127.0.0.1:8899/websocket/nuclear
\ No newline at end of file
+VITE_WEBSOCKET_JAVA_URL=ws://127.0.0.1:8899/websocket/nuclear
+VITE_WEBSOCKET_CAMERA_URL=ws://127.0.0.1:8899/websocket/nuclear
\ No newline at end of file
diff --git a/src/components/Debug.vue b/src/components/Debug.vue
index 69dde4d..9f8d357 100644
--- a/src/components/Debug.vue
+++ b/src/components/Debug.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 const simulation_brightness = ref(0)
 const brightness_1 = ref(0)
 const brightness_2 = ref(0)
@@ -77,8 +77,68 @@ const brightness_3 = ref(0)
 const brightness_4 = ref(0)
 const exposure = ref(0)
 
-onMounted(() => {
-  // 进入页面时链接ws，进行调试
+// 是否真正建立连接
+const lockReconnect = ref(false)
+// 断开 重连倒计时
+const timeoutnum = ref(null)
+
+const websock = ref(null)
+
+const reconnect = () => {
+  //重新连接
+  if (lockReconnect.value) {
+    return
+  }
+  lockReconnect.value = true
+  //没连接上会一直重连，设置延迟避免请求过多
+  timeoutnum.value && clearTimeout(timeoutnum.value)
+  timeoutnum.value = setTimeout(function () {
+    //新连接
+    initWebSocket()
+    lockReconnect.value = false
+  }, 5000)
+}
+
+// 接收到消息后改变状态
+const websocketonmessage = e => {
+  console.log(e.data)
+}
+
+const websocketonopen = () => {
+  console.log('客户端链接1！！！')
+}
+
+const websocketonerror = () => {
+  reconnect()
+}
+
+// 发送消息
+const websocketsend = data => {
+  websock.value.send(data)
+}
+
+const websocketclose = () => {
+  reconnect()
+}
+
+const initWebSocket = () => {
+  //初始化weosocket
+  const wsuri = import.meta.env.VITE_WEBSOCKET_CAMERA_URL
+  websock.value = new WebSocket(wsuri)
+  // 客户端接收服务端数据时触发
+  websock.value.onmessage = websocketonmessage
+  // 连接建立时触发
+  websock.value.onopen = websocketonopen
+  // 通信发生错误时触发
+  websock.value.onerror = websocketonerror
+  // 连接关闭时触发
+  websock.value.onclose = websocketclose
+}
+
+initWebSocket()
+
+onUnmounted(() => {
+  websock.value.close()
 })
 </script>
 
diff --git a/src/utils/websocket.js b/src/utils/websocket.js
index e72eab8..a8800f7 100644
--- a/src/utils/websocket.js
+++ b/src/utils/websocket.js
@@ -4,7 +4,7 @@ class socket {
   }
   WebSocketSet(callBack) {
     if ('WebSocket' in window) {
-      this.ws = new WebSocket(`${import.meta.env.VITE_WEBSOCKET_URL}`)
+      this.ws = new WebSocket(`${import.meta.env.VITE_WEBSOCKET_JAVA_URL}`)
       this.ws.onopen = res => {
         console.log('socket连接成功')
       }