连接断开

src/App.vue

@@ -4,13 +4,15 @@
       <component :is="Component"/>
     </keep-alive>
   </router-view>
+  <soctet-dialog v-if="socketErrDialog"/>
 </template>
 
 <script setup name="App">
 import {useStore} from 'vuex'
-import {setCallback} from "@/utils/websocket";
+import {setCallback, socketErrDialog} from "@/utils/websocket";
 import {ElMessageBox, ElNotification} from "element-plus";
 import sleep from "@/utils/sleep";
+import SoctetDialog from "@/components/xiao-chan/websocket/SoctetDialog.vue";
 
 const store = useStore()
 

src/components/xiao-chan/websocket/SoctetDialog.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="dialog_main">
+    <div class="loading">
+      <div class="header">
+        服务器断开连接
+      </div>
+      <div class="dialog_body">
+       <span class="svg-icon">
+        <i>
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728="">
+            <path fill="currentColor"
+                  d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path>
+          </svg>
+          </i>
+        <span style="color: red">
+          服务器升级中，重新连接 ...
+        </span>
+      </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name='SoctetDialog'>
+
+</script>
+
+<style scoped lang="scss">
+.dialog_main {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, .5);
+  z-index: 99;
+
+  .header {
+    text-align: center;
+    padding: 10px 0;
+  }
+
+  .loading {
+    margin-top: 5%;
+    width: 40%;
+    height: 40%;
+    z-index: 100;
+    background-color: white;
+    border-radius: 10px;
+
+    .dialog_body {
+      height: calc(100% - 40px);
+    }
+
+    .svg-icon {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      cursor: pointer;
+
+      i {
+        font-size: 150px;
+        --color: inherit;
+        height: 1em;
+        width: 1em;
+        line-height: 1em;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        fill: currentColor;
+        color: var(--color);
+        animation: fadenum 2s linear infinite;
+      }
+    }
+  }
+}
+
+
+@keyframes fadenum {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/utils/websocket.js

@@ -2,6 +2,8 @@ import {ElMessageBox} from 'element-plus'
 import Cookies from 'js-cookie'
 import router from '@/router'
 import store from '@/store'
+import SoctetDialog from "@/components/xiao-chan/websocket/SoctetDialog.vue";
+import {createApp} from 'vue'
 
 const socketUrl = import.meta.env.VITE_SOCKET_URL
 
@@ -39,8 +41,9 @@ function sendAMessage(name, data) {
     }
 }
 
-export function initWebSocket(sid, force) {
+export const socketErrDialog = ref(false)
 
+export function initWebSocket(sid, force) {
     if ('WebSocket' in window) {
         if (webSocket === null || force) {
             const url = socketUrl + sid
@@ -52,16 +55,17 @@ export function initWebSocket(sid, force) {
     }
 
     webSocket.onopen = function () {
+        socketErrDialog.value = false
         console.log('WebSocket连接成功')
     }
 
-
     webSocket.onmessage = function (e) {
         let data = JSON.parse(e.data)
         sendAMessage(data.name, data.message)
     }
 
     webSocket.onclose = function () {
+        socketErrDialog.value = true
         webSocket = null
         let sid
         if (router.currentRoute.value.path === '/triageRoomScreen') {