websocket 重连

src/components/RealTimeMsg/index.vue

@@ -93,46 +93,57 @@ const submit = async (item, index) => {
   }
 };
 //连接地址
-const ws = new WebSocket(
-  `${import.meta.env.VITE_WEBSOCKET_URL}/websocket/${localStorage.getItem("token")}`
-);
-ws.onopen = () => {};
-ws.onmessage = (event) => {
-  const receivedMessage = event.data;
-  const type = JSON.parse(receivedMessage).msgType;
-  switch (type) {
-    //处理左侧弹框消息
-    case "1":
-      if (firstNotice.value == false) {
-        if (messages.value.length > 0) {
-          showStatus.value = false;
-        } else {
-          showStatus.value = true;
+const ws = ref(null);
+const addWebSocket = () => {
+  ws.value = new WebSocket(
+    `${import.meta.env.VITE_WEBSOCKET_URL}/websocket/${localStorage.getItem("token")}`
+  );
+  ws.value.onopen = () => {};
+  ws.value.onmessage = (event) => {
+    const receivedMessage = event.data;
+    const type = JSON.parse(receivedMessage).msgType;
+    switch (type) {
+      //处理左侧弹框消息
+      case "1":
+        if (firstNotice.value == false) {
+          if (messages.value.length > 0) {
+            showStatus.value = false;
+          } else {
+            showStatus.value = true;
+          }
         }
-      }
-      break;
-    //回填表格数据
-    case "2":
-      window.luckysheet.setVal(JSON.parse(JSON.parse(receivedMessage).content));
-      break;
-    case "3":
-      braceletState.value = JSON.parse(receivedMessage).content;
-      break;
+        break;
+      //回填表格数据
+      case "2":
+        window.luckysheet.setVal(
+          JSON.parse(JSON.parse(receivedMessage).content)
+        );
+        break;
+      case "3":
+        braceletState.value = JSON.parse(receivedMessage).content;
+        break;
 
-    case "4":
-      lightIndex.value = JSON.parse(receivedMessage).content;
-      break;
-  }
+      case "4":
+        lightIndex.value = JSON.parse(receivedMessage).content;
+        break;
+    }
+  };
+  ws.value.onclose = () => {
+    if (ws.value.readyState == 3) {
+      addWebSocket();
+    }
+  };
 };
+
 const changePop = () => {
   showStatus.value = !showStatus.value;
   firstNotice.value = true;
 };
-ws.onclose = () => {
-  console.log("断开");
-};
+onMounted(() => {
+  addWebSocket();
+});
 onUnmounted(() => {
-  ws.onclose();
+  ws.value.onclose();
 });
 </script>
 <style scoped lang="scss">