增加在线用户系统通知

src/store/modules/socket.js

@@ -17,6 +17,10 @@ const useSocketStore = defineStore('socket', {
     },
     setOnlineUsers(data) {
       this.onlineUsers = data
+    },
+    sendChat(data) {
+      const { proxy } = getCurrentInstance()
+      console.log(data)
     }
   }
 })

src/utils/index.js

@@ -1,4 +1,5 @@
 import { parseTime } from './ruoyi'
+import { useWebNotification } from '@vueuse/core'
 
 /**
  * @param {number} time
@@ -359,4 +360,22 @@ export function rgbToHex(r, g, b) {
   for (let i = 0; i < 3; i++)
     if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
   return `#${hexs.join('')}`;
+}
+
+/**
+ * 浏览器Web通知
+ * @param { title: 'title' } optinos
+ */
+export function webNotify(optinos) {
+  const { show, isSupported } = useWebNotification({
+    title: optinos.title,
+    dir: 'auto',
+    lang: 'en',
+    renotify: true,
+    tag: 'tag',
+    body: optinos.body
+  })
+  if (isSupported) {
+    show()
+  }
 }

src/utils/signalR.js

@@ -2,8 +2,8 @@
 import * as signalR from '@microsoft/signalr'
 import { getToken } from '@/utils/auth'
 import { ElNotification } from 'element-plus'
-import { useWebNotification } from '@vueuse/core'
 import useSocketStore from '@/store/modules/socket'
+import { webNotify } from './index'
 export default {
   // signalR对象
   SR: {},
@@ -60,7 +60,7 @@ export default {
   // 接收消息处理
   receiveMsg(connection) {
     connection.on("onlineNum", (data) => {
-			useSocketStore().setOnlineUserNum(data)
+      useSocketStore().setOnlineUserNum(data)
     });
     // 接收欢迎语
     connection.on("welcome", (data) => {
@@ -75,27 +75,31 @@ export default {
         dangerouslyUseHTMLString: true,
         duration: 0
       })
-      const { show, isSupported } = useWebNotification({
+      webNotify({ title: title, body: data })
-        title: data,
-        dir: 'auto',
-        lang: 'en',
-        renotify: true,
-        tag: 'tag',
-      })
-      if (isSupported) {
-        show()
-      }
     })
     // 接收系统通知/公告
     connection.on("moreNotice", (data) => {
       if (data.code == 200) {
-				useSocketStore().setNoticeList(data.data)
+        useSocketStore().setNoticeList(data.data)
       }
     })
 
     // 接收在线用户
     connection.on("onlineUser", (data) => {
-			useSocketStore().setOnlineUsers(data)
+      useSocketStore().setOnlineUsers(data)
+    })
+
+    // 接收聊天数据
+    connection.on('receiveChat', (data) => {
+      const title = `来自${data.userName}的消息通知`
+      ElNotification({
+        title: title,
+        message: data.message,
+        type: 'success',
+        duration: 0
+      })
+
+      webNotify({ title: title, body: data.message })
     })
   }
 }

src/views/index_v1.vue

@@ -75,6 +75,7 @@
                     <div class="info-item-left" v-text="v.name"></div>
                     <div>{{ v.userIP }}({{ v.location }})</div>
                     <div class="info-item-right" v-text="dayjs(v.loginTime).format('HH:mm:ss')"></div>
+                    <el-button text @click="onChat(v)" icon="bell" v-hasRole="['admin']">通知</el-button>
                   </li>
                 </ul>
               </div>
@@ -220,6 +221,21 @@ function handleSetLineChartData(type) {
 }
 handleSetLineChartData('newVisitis')
 function onOpenGitee() {}
+function onChat(item) {
+  proxy
+    .$prompt('请输入通知内容', '', {
+      confirmButtonText: '发送',
+      cancelButtonText: '取消',
+      inputPattern: /\S/,
+      inputErrorMessage: '消息内容不能为空',
+    })
+    .then(({ value }) => {
+      proxy.signalr.SR.invoke('SendMessage', item.connnectionId, item.name, value).catch(function (err) {
+        console.error(err.toString())
+      })
+    })
+    .catch(() => {})
+}
 </script>
 
 <style lang="scss" scoped>
@@ -292,7 +308,7 @@ function onOpenGitee() {}
             overflow: hidden;
           }
           .info-item-right {
-            width: 160px;
+            width: 100px;
             text-align: right;
             padding-right: 10px;
           }