优化Socket消息

src/App.vue

@@ -5,12 +5,12 @@
   <transition v-if="isLock && $route.name !== 'login'" name="slide-up">
     <LockScreen />
   </transition>
-  <global-websocket :uri="'/api/websocket/'+userInfo.id" @rollback="rollback" />
+  <global-websocket :uri="'/api/websocket/' + userInfo.id" @rollback="rollback" />
 </template>
 
 <script lang="ts" setup>
-  import { computed, onMounted, onUnmounted,defineAsyncComponent ,h } from 'vue';
+  import { computed, onMounted, onUnmounted, defineAsyncComponent, h } from 'vue';
-  import { ConfigProvider,notification } from 'ant-design-vue';
+  import { ConfigProvider, notification } from 'ant-design-vue';
   import { LockScreen } from '@/components/Lockscreen';
   import { useLockscreenStore } from '@/store/modules/lockscreen';
   import { useRoute } from 'vue-router';
@@ -19,11 +19,12 @@
   import dayjs from 'dayjs';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import Watermark from '@/utils/wartermark';
-  import { initWebSocket,sendWebSocket } from '@/components/Websocket/index';
-  const GlobalWebsocket = defineAsyncComponent(() => import('@/components/Websocket/index.vue'));
   import 'dayjs/locale/zh-cn';
   dayjs.locale('zh-cn');
 
+  /**
+   * 定义参数
+   */
   const route = useRoute();
   const locale = zhCN;
   const useLockscreen = useLockscreenStore();
@@ -31,9 +32,13 @@
   const userInfo: object = userStore.getUserInfo || {};
   const isLock = computed(() => useLockscreen.isLock);
   const lockTime = computed(() => useLockscreen.lockTime);
-  const {getIsWaterMark} = useProjectSetting();
+  const { getIsWaterMark } = useProjectSetting();
+  const GlobalWebsocket = defineAsyncComponent(() => import('@/components/Websocket/index.vue'));
   let timer;
 
+  /**
+   * 定义锁屏
+   */
   const timekeeping = () => {
     clearInterval(timer);
     if (route.name == 'login' || isLock.value) return;
@@ -51,19 +56,26 @@
       }
     }, 1000);
   };
-  const rollback = (msg)=>{
+
+  /**
+   * 通知回调
+   */
+  const rollback = (msg) => {
     notification.info({
-        message: '通知',
+      message: '通知',
-        description: () =>
+      description: () => h('div', msg),
-          h('div', msg),
+    });
-      });
+  };
-  }
+
+  /**
+   * 钩子函数
+   */
   onMounted(() => {
-    if(getIsWaterMark.value) {
+    if (getIsWaterMark.value) {
       const waterText = import.meta.env.VITE_GLOB_APP_TITLE;
-      Watermark.set(waterText)
+      Watermark.set(waterText);
     } else {
-      Watermark.del()
+      Watermark.del();
     }
     // document.addEventListener('mousedown', timekeeping);
   });

src/views/system/user/index.vue

@@ -124,8 +124,8 @@
       @success="reloadTable('noRefresh')"
     />
     <userUpload v-if="importVisible" v-model:visible="importVisible" @success="reloadTable()" />
-     <!-- 发送WebSocket消息 -->
+    <!-- 发送WebSocket消息 -->
-     <sendMsgDialog v-if="sendMsgVisible" v-model:visible="sendMsgVisible" :receiveId="receiveId" />
+    <sendMsgDialog v-if="sendMsgVisible" v-model:visible="sendMsgVisible" :receiveId="receiveId" />
   </PageWrapper>
 </template>
 
@@ -139,7 +139,7 @@
     DownloadOutlined,
     UploadOutlined,
     PrinterOutlined,
-    CommentOutlined
+    CommentOutlined,
   } from '@ant-design/icons-vue';
   import { useForm } from '@/components/Form/index';
   import {
@@ -322,11 +322,11 @@
       showModal: true,
     });
   };
-    /**
+  /**
    * 发送消息
    * 此处写的是Socket消息发送案例，实际业务研发时根据实际需求自行接入模板消息
    */
-   const sendMessage = async () => {
+  const sendMessage = async () => {
     if (selectionData.value.length == 0) {
       message.error('请选择数据');
       return;

src/views/system/user/sendMsg.vue

@@ -1,17 +1,12 @@
 <template>
-  <a-modal
+  <a-modal v-model:visible="props.visible" title="发送消息" width="800px" @cancel="dialogClose">
-    v-model:visible="props.visible"
-    title="发送消息"
-    width="800px"
-    @cancel="dialogClose"
-  >
     <a-form :model="formData" :label-col="{ style: { width: '10-0px' } }" ref="formRef">
       <a-form-item
         label="消息内容"
         name="message"
         :rules="{ required: true, message: '请输入消息内容', trigger: 'blur' }"
       >
-        <a-textarea v-model:value="formData.message"/>
+        <a-textarea v-model:value="formData.message" />
       </a-form-item>
     </a-form>
     <template #footer>