feat: 完成通知公告功能

Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application/Services/NoticeService.cs

@@ -1,8 +1,11 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.SignalR;
 using SqlSugar;
 using Volo.Abp.Application.Dtos;
 using Yi.Framework.Ddd.Application;
 using Yi.Framework.Rbac.Application.Contracts.Dtos.Notice;
 using Yi.Framework.Rbac.Application.Contracts.IServices;
+using Yi.Framework.Rbac.Application.SignalRHubs;
 using Yi.Framework.Rbac.Domain.Entities;
 using Yi.Framework.SqlSugarCore.Abstractions;
 
@@ -15,8 +18,10 @@ namespace Yi.Framework.Rbac.Application.Services
        INoticeService
     {
         private ISqlSugarRepository<NoticeEntity, Guid> _repository;
-        public NoticeService(ISqlSugarRepository<NoticeEntity, Guid> repository) : base(repository)
+        private IHubContext<NoticeHub> _hubContext;
+        public NoticeService(ISqlSugarRepository<NoticeEntity, Guid> repository, IHubContext<NoticeHub> hubContext) : base(repository)
         {
+            _hubContext = hubContext;
             _repository = repository;
         }
 
@@ -29,11 +34,37 @@ namespace Yi.Framework.Rbac.Application.Services
         {
             RefAsync<int> total = 0;
 
-            var entities = await _repository._DbQueryable.WhereIF(input.Type is not null, x => x.Type==input.Type)
+            var entities = await _repository._DbQueryable.WhereIF(input.Type is not null, x => x.Type == input.Type)
                           .WhereIF(!string.IsNullOrEmpty(input.Title), x => x.Title!.Contains(input.Title!))
                           .WhereIF(input.StartTime is not null && input.EndTime is not null, x => x.CreationTime >= input.StartTime && x.CreationTime <= input.EndTime)
                           .ToPageListAsync(input.SkipCount, input.MaxResultCount, total);
             return new PagedResultDto<NoticeGetListOutputDto>(total, await MapToGetListOutputDtosAsync(entities));
         }
+
+
+
+        /// <summary>
+        /// 发送在线消息
+        /// </summary>
+        /// <returns></returns>
+        [HttpPost("notice/online/{id}")]
+        public async Task SendOnlineAsync([FromRoute] Guid id)
+        {
+            var entity = await _repository._DbQueryable.FirstAsync(x => x.Id == id);
+            await _hubContext.Clients.All.SendAsync("ReceiveNotice", entity.Type.ToString(), entity.Title, entity.Content);
+        }
+        /// <summary>
+        /// 发送离线消息
+        /// </summary>
+        /// <returns></returns>
+        [HttpPost("notice/offline/{id}")]
+        public async Task SendOfflineAsync([FromRoute] Guid id)
+        {
+            //先发送一个在线
+            await SendOnlineAsync(id);
+
+            //然后将所有用户和通知id进行保留记录，判断是否已读还是未读
+            //在首次请求返回全部未读的通知给前端即可
+        }
     }
 }

Yi.Bbs.Vue3/src/App.vue

@@ -7,6 +7,7 @@
 </template>
 <script setup>
 import signalR from "@/utils/signalR";
+import noticeSignalR from "@/utils/noticeSignalR";
 import useConfigStore from "@/stores/config";
 import { ElConfigProvider } from "element-plus";
 import useUserStore from "@/stores/user.js";
@@ -25,9 +26,8 @@ if (loading !== null) {
 //加载全局信息
 onMounted(async () => {
   await configStore.getConfig();
-  //    setInterval(() => {
+  noticeSignalR.close();
-  //  console.log("token的值："+tokenValue.value);
+  noticeSignalR.init(`notice`);
-  //     }, 1000); // 1000毫秒，即1秒
 });
 
 

Yi.Bbs.Vue3/src/utils/noticeSignalR.js

@@ -0,0 +1,107 @@
+// 官方文档：https://docs.microsoft.com/zh-cn/aspnet/core/signalr/javascript-client?view=aspnetcore-6.0&viewFallbackFrom=aspnetcore-2.2&tabs=visual-studio
+import * as signalR from "@microsoft/signalr";
+
+export default {
+  // signalR对象
+  SR: {},
+  // 失败连接重试次数
+  failNum: 4,
+  async init(url) {
+    const connection = new signalR.HubConnectionBuilder()
+      .withUrl(`${import.meta.env.VITE_APP_BASE_WS}/` + url)
+      .withAutomaticReconnect() //自动重新连接
+      .configureLogging(signalR.LogLevel.Information)
+      .build();
+
+
+    this.SR = connection;
+    // 断线重连
+    connection.onclose(async () => {
+      console.log("断开连接了");
+      console.assert(
+        connection.state === signalR.HubConnectionState.Disconnected
+      );
+      // 建议用户重新刷新浏览器
+    });
+
+    connection.onreconnected(() => {
+      console.log("断线重新连接成功");
+    });
+    this.receiveMsg(connection);
+    // 启动
+    await this.start();
+  },
+  /**
+   * 调用 this.signalR.start().then(async () => { await this.SR.invoke("method")})
+   * @returns
+   */
+  async close() {
+    try {
+      var that = this;
+      await this.SR.stop();
+      this.SR = {};
+    } catch { }
+  },
+
+  async start() {
+    var that = this;
+
+    try {
+      //使用async和await 或 promise的then 和catch 处理来自服务端的异常
+      await this.SR.start();
+      //console.assert(this.SR.state === signalR.HubConnectionState.Connected);
+      //console.log('signalR 连接成功了', this.SR.state);
+      return true;
+    } catch (error) {
+      that.failNum--;
+      //console.log(`失败重试剩余次数${that.failNum}`, error)
+      if (that.failNum > 0) {
+        setTimeout(async () => {
+          await this.SR.start();
+        }, 5000);
+      }
+      return false;
+    }
+  },
+  // 接收消息处理
+  receiveMsg(connection) {
+    connection.on("receiveNotice", (type, title, content) => {
+
+      switch (type) {
+        case "MerryGoRound":
+          ElNotification({
+            title: title,
+            dangerouslyUseHTMLString: true,
+            message: content,
+          })
+          break;
+          case "Popup":
+            ElNotification({
+              title: title,
+              dangerouslyUseHTMLString: true,
+              message: content,
+            })
+            break;
+      }
+    });
+
+    // connection.on("onlineNum", (data) => {
+    //   store.dispatch("socket/changeOnlineNum", data);
+    // });
+    // // 接收欢迎语
+    // connection.on("welcome", (data) => {
+    //   console.log('welcome', data)
+    //   Notification.info(data)
+    // });
+    // // 接收后台手动推送消息
+    // connection.on("receiveNotice", (title, data) => {
+    //   Notification({
+    //     type: 'info',
+    //     title: title,
+    //     message: data,
+    //     dangerouslyUseHTMLString: true,
+    //     duration: 0
+    //   })
+    // })
+  },
+};

Yi.RuoYi.Vue3/src/api/system/notice.js

@@ -42,4 +42,19 @@ export function delNotice(ids) {
     method: 'delete',
     params:{id:ids}
   })
+}
+
+// 发送在线公告
+export function sendOnlineNotice(id) {
+  return request({
+    url: '/notice/online/'+id,
+    method: 'post',
+  })
+}
+// 发送离线公告
+export function sendOfflineNotice(id) {
+  return request({
+    url: '/notice/offline/'+id,
+    method: 'post',
+  })
 }

Yi.RuoYi.Vue3/src/views/system/notice/index.vue

@@ -180,7 +180,7 @@
 </template>
 
 <script setup name="Notice">
-import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
+import { sendOnlineNotice,sendOfflineNotice,listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
 
 const { proxy } = getCurrentInstance();
 const sys_notice_state=[
@@ -307,12 +307,14 @@ function handleDelete(row) {
   }).catch(() => {});
 }
 
-const handleOnlineSend=(id)=>{
+const handleOnlineSend=async (id)=>{
-
+  await sendOnlineNotice(id);
+  proxy.$modal.msgSuccess("在线消息发送成功");
 
 }
-const handleOfflineSend=(id)=>{
+const handleOfflineSend=async (id)=>{
-
+   await sendOfflineNotice(id);
+   proxy.$modal.msgSuccess("离线消息发送成功");
 }
 getList();
 </script>