From 4035eaee47ec006bdbb04b110a16af7b43269aae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Sun, 12 Jun 2022 21:47:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9C=A8=E7=BA=BF=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=B3=BB=E7=BB=9F=E9=80=9A=E7=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/socket.js |  4 ++++
 src/utils/index.js          | 19 +++++++++++++++++++
 src/utils/signalR.js        | 32 ++++++++++++++++++--------------
 src/views/index_v1.vue      | 18 +++++++++++++++++-
 4 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/src/store/modules/socket.js b/src/store/modules/socket.js
index 552c52f..9e10b5d 100644
--- a/src/store/modules/socket.js
+++ b/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)
     }
   }
 })
diff --git a/src/utils/index.js b/src/utils/index.js
index 1ce9beb..0aa8e12 100644
--- a/src/utils/index.js
+++ b/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()
+  }
 }
\ No newline at end of file
diff --git a/src/utils/signalR.js b/src/utils/signalR.js
index daa6c36..f1a86c5 100644
--- a/src/utils/signalR.js
+++ b/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({
-        title: data,
-        dir: 'auto',
-        lang: 'en',
-        renotify: true,
-        tag: 'tag',
-      })
-      if (isSupported) {
-        show()
-      }
+      webNotify({ title: title, body: data })
     })
     // 接收系统通知/公告
     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 })
     })
   }
 }
\ No newline at end of file
diff --git a/src/views/index_v1.vue b/src/views/index_v1.vue
index 1bf85fe..21ae4a5 100644
--- a/src/views/index_v1.vue
+++ b/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;
           }