Websocket

src/App.vue

@@ -5,20 +5,24 @@
       <transition v-if="isLock && $route.name !== LoginName" name="slide-up">
         <LockScreen />
       </transition>
+      <global-websocket :uri="'/api/websocket/'+userInfo.id" @rollback="rollback" />
     </AppProvider>
   </el-config-provider>
 </template>
 
 <script lang="ts" setup>
-  import { computed, onMounted, onUnmounted, ref } from 'vue';
+  import { computed, onMounted, onUnmounted, ref,defineAsyncComponent,h } from 'vue';
-  import { ElConfigProvider } from 'element-plus';
+  import { ElConfigProvider,ElNotification } from 'element-plus';
   import { LockScreen } from '@/components/Lockscreen';
   import { AppProvider } from '@/components/Application';
   import { useLockscreenStore } from '@/store/modules/lockscreen';
   import { useRoute } from 'vue-router';
   import { PageEnum } from '@/enums/pageEnum';
+  import { useUserStore } from '@/store/modules/user';
   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'));
 
   const route = useRoute();
   const useLockscreen = useLockscreenStore();
@@ -30,6 +34,9 @@
   const { getIsWaterMark } = useProjectSetting();
   const LoginName = PageEnum.BASE_LOGIN_NAME;
 
+  const userStore = useUserStore();
+  const userInfo: object = userStore.getUserInfo || {};
+
   let timer;
 
   const timekeeping = () => {
@@ -50,6 +57,14 @@
     }, 1000);
   };
 
+  const rollback = (msg)=>{
+    ElNotification({
+      type: 'info',
+      title: '通知',
+      message: h('div', msg),
+      duration: 5000,
+    });
+  }
   onMounted(() => {
     if (getIsWaterMark.value) {
       const waterText = import.meta.env.VITE_GLOB_APP_TITLE;

src/api/system/user.ts

@@ -254,3 +254,14 @@ export function getCityByList(pid: any) {
     method: 'get',
   });
 }
+
+/**
+ * @description: 发送消息
+ */
+export function sendMsg(data) {
+  return http.request({
+    url: '/websocket/sendMsg',
+    method: 'post',
+    data
+  });
+}

src/components/Websocket/index.vue

@@ -0,0 +1,155 @@
+<template>
+	<div></div>
+</template>
+<script setup lang="ts" name="global-websocket">
+  import { reactive, ref, computed,onMounted,onUnmounted   } from 'vue';
+  import { useUserStore } from '@/store/modules/user';
+
+const emit = defineEmits(['rollback']);
+
+const props = defineProps({
+	uri: {
+		type: String,
+	},
+});
+
+const state = reactive({
+	webSocket: ref(), // webSocket实例
+	lockReconnect: false, // 重连锁，避免多次重连
+	maxReconnect: 6, // 最大重连次数， -1 标识无限重连
+	reconnectTime: 0, // 重连尝试次数
+	heartbeat: {
+		interval: 30 * 1000, // 心跳间隔时间
+		timeout: 10 * 1000, // 响应超时时间
+		pingTimeoutObj: ref(), // 延时发送心跳的定时器
+		pongTimeoutObj: ref(), // 接收心跳响应的定时器
+		pingMessage: JSON.stringify({ type: 'ping' }), // 心跳请求信息
+	},
+});
+
+const token = computed(() => {
+	return useUserStore().getToken;
+});
+
+const tenant = computed(() => {
+	return Session.getTenant();
+});
+
+onMounted(() => {
+	initWebSocket();
+});
+
+onUnmounted(() => {
+	state.webSocket.close();
+	clearTimeoutObj(state.heartbeat);
+});
+
+const initWebSocket = () => {
+	// ws地址
+	let host = window.location.host;
+  let wsUri =`${location.protocol === 'https:' ? 'wss' : 'ws'}://${host}${props.uri}`;
+
+	// 建立连接
+	state.webSocket = new WebSocket(wsUri);
+	// 连接成功
+	state.webSocket.onopen = onOpen;
+	// 连接错误
+	state.webSocket.onerror = onError;
+	// 接收信息
+	state.webSocket.onmessage = onMessage;
+	// 连接关闭
+	state.webSocket.onclose = onClose;
+};
+
+const reconnect = () => {
+	if (!token) {
+		return;
+	}
+	if (state.lockReconnect || (state.maxReconnect !== -1 && state.reconnectTime > state.maxReconnect)) {
+		return;
+	}
+	state.lockReconnect = true;
+	setTimeout(() => {
+		state.reconnectTime++;
+		// 建立新连接
+		initWebSocket();
+		state.lockReconnect = false;
+	}, 5000);
+};
+/**
+ * 清空定时器
+ */
+const clearTimeoutObj = (heartbeat: any) => {
+	heartbeat.pingTimeoutObj && clearTimeout(heartbeat.pingTimeoutObj);
+	heartbeat.pongTimeoutObj && clearTimeout(heartbeat.pongTimeoutObj);
+};
+/**
+ * 开启心跳
+ */
+const startHeartbeat = () => {
+	const webSocket = state.webSocket;
+	const heartbeat = state.heartbeat;
+	// 清空定时器
+	clearTimeoutObj(heartbeat);
+	// 延时发送下一次心跳
+	heartbeat.pingTimeoutObj = setTimeout(() => {
+		// 如果连接正常
+		if (webSocket.readyState === 1) {
+			//这里发送一个心跳，后端收到后，返回一个心跳消息，
+			webSocket.send(heartbeat.pingMessage);
+			// 心跳发送后，如果服务器超时未响应则断开，如果响应了会被重置心跳定时器
+			heartbeat.pongTimeoutObj = setTimeout(() => {
+				webSocket.close();
+			}, heartbeat.timeout);
+		} else {
+			// 否则重连
+			reconnect();
+		}
+	}, heartbeat.interval);
+};
+
+/**
+ * 连接成功事件
+ */
+const onOpen = () => {
+	//开启心跳
+	startHeartbeat();
+	state.reconnectTime = 0;
+};
+/**
+ * 连接失败事件
+ * @param e
+ */
+const onError = () => {
+	//重连
+	reconnect();
+};
+
+/**
+ * 连接关闭事件
+ * @param e
+ */
+const onClose = () => {
+	//重连
+	reconnect();
+};
+/**
+ * 接收服务器推送的信息
+ * @param msgEvent
+ */
+const onMessage = (msgEvent: any) => {
+	//收到服务器信息，心跳重置并发送
+	startHeartbeat();
+	// if (msgEvent.data.indexOf('pong') > 0) {
+	// 	return;
+	// }
+	// let text =''
+	// try{
+	// 	text = JSON.parse(msgEvent.data);
+	// }catch(e){
+	// 	return
+	// }
+
+	emit('rollback', msgEvent.data);
+};
+</script>

src/views/system/user/index.vue

@@ -84,6 +84,14 @@
               </template>
               导出
             </el-button>
+            <el-button type="primary" @click="sendMessage">
+              <template #icon>
+                <el-icon style="vertical-align: middle">
+                  <ChatLineRound />
+                </el-icon>
+              </template>
+              发送消息
+            </el-button>
           </el-space>
         </template>
       </BasicTable>
@@ -95,6 +103,11 @@
       @success="reloadTable('noRefresh')"
     />
     <userUpload v-if="importVisible" v-model:visible="importVisible" @success="reloadTable()" />
+    <sendMsgDialog
+      v-if="sendMsgVisible"
+      v-model:visible="sendMsgVisible"
+      :receiveId="receiveId"
+    />
   </PageWrapper>
 </template>
 
@@ -103,6 +116,7 @@
   import { ColProps } from 'element-plus';
   import { TableAction } from '@/components/Table';
   import { useForm } from '@/components/Form/index';
+  import { initWebSocket,sendWebSocket } from '@/components/Websocket/index';
   import {
     getUserList,
     userDelete,
@@ -117,14 +131,16 @@
   import { downloadByData } from '@/utils/file/download';
   import printJS from 'print-js';
   const userId = ref(0);
+  const receiveId = ref('')
   const tableRef = ref();
   const editVisible = ref(false);
+  const sendMsgVisible = ref(false);
   const importVisible = ref(false);
   const selectionData = ref([]);
   const exportLoading = ref(false);
   const editDialog = defineAsyncComponent(() => import('./edit.vue'));
+  const sendMsgDialog = defineAsyncComponent(() => import('./sendMsg.vue'));
   const userUpload = defineAsyncComponent(() => import('./userUpload.vue'));
-
   /**
    * 定义查询参数
    */
@@ -313,6 +329,19 @@
     exportLoading.value = false;
     message('导出成功');
   };
+  /**
+   * 发送消息
+   */
+  const sendMessage=async ()=>{
+    if(selectionData.value.length==0){
+      message('请选择数据','error')
+      return
+    }
+    let ids = [];
+    ids = selectionData.value.map(({ id }) => id);
+    receiveId.value = ids.join()
+    sendMsgVisible.value = true
+  }
 </script>
 
 <style lang="scss" scoped></style>

src/views/system/user/sendMsg.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-dialog
+    v-model="props.visible"
+    title="发送消息"
+    width="600"
+    :close-on-click-modal="false"
+    :before-close="dialogClose"
+  >
+    <el-form :model="formData" label-width="100px" ref="formRef">
+        <el-form-item label="消息内容" prop="message"
+        :rules="{ required: true, message: '请输入消息内容', trigger: 'blur' }">
+          <el-input v-model="formData.message" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogClose">取消</el-button>
+        <el-button :loading="subLoading" type="primary" @click="submit"> 确定 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+  import type { FormInstance } from 'element-plus';
+  import {sendMsg} from '@/api/system/user';
+  import { useUserStore } from '@/store/modules/user';
+  import { onMounted, reactive, ref, shallowRef } from 'vue';
+  import { message, buildTree } from '@/utils/auth';
+  import { useLockFn } from '@/utils/useLockFn';
+
+  const userStore = useUserStore();
+  const userInfo: object = userStore.getUserInfo || {};
+  /**
+   * 定义接收的参数
+   */
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    receiveId: {
+      type: String,
+      default: '',
+    },
+  });
+  const emit = defineEmits(['update:visible']);
+  const formRef = shallowRef<FormInstance>();
+
+  /**
+   * 定义表单参数
+   */
+  const formData = reactive({
+    message: ''
+  });
+
+  /**
+   * 关闭窗体
+   */
+  const dialogClose = () => {
+    emit('update:visible', false);
+  };
+
+  /**
+   * 执行提交表单数据
+   */
+  const handleSubmit = async () => {
+    await formRef.value?.validate();
+    await sendMsg({
+        formId:userInfo.id,
+        receiveId:props.receiveId,
+        message:formData.message
+    })
+    message('发送成功');
+    emit('update:visible', false);
+  };
+
+  const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
+
+</script>