新增signalR连接

ZR.Admin.WebApi/Hubs/MessageHub.cs

@@ -0,0 +1,62 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Infrastructure.Model;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.SignalR;
+using ZR.Admin.WebApi.Filters;
+using ZR.Model;
+
+namespace ZR.Admin.WebApi.Hubs
+{
+    [Verify]
+    public class MessageHub : Hub
+    {
+        //创建用户集合，用于存储所有链接的用户数据
+        private static readonly List<OnlineUsers> clientUsers = new();
+
+        #region 客户端连接
+
+        /// <summary>
+        /// 客户端连接的时候调用
+        /// </summary>
+        /// <returns></returns>
+        public override Task OnConnectedAsync()
+        {
+            //name 获取不到有待研究
+            var name = Context.User.Identity.Name;
+            var user = clientUsers.Any(u => u.ConnnectionId == Context.ConnectionId);
+            //判断用户是否存在，否则添加集合
+            if (!user)
+            {
+                clientUsers.Add(new OnlineUsers(Context.ConnectionId, Context.User.Identity.Name));
+                Console.WriteLine($"{DateTime.Now}：{Context.User.Identity.Name},{Context.ConnectionId}连接服务端success，当前已连接{clientUsers.Count}个");
+            }
+
+            Clients.All.SendAsync("onlineNum", clientUsers.Count);
+            return base.OnConnectedAsync();
+        }
+
+        /// <summary>
+        /// 连接终止时调用。
+        /// </summary>
+        /// <returns></returns>
+        public override Task OnDisconnectedAsync(Exception exception)
+        {
+            var user = clientUsers.Where(p => p.ConnnectionId == Context.ConnectionId).FirstOrDefault();
+            //判断用户是否存在，否则添加集合
+            if (user != null)
+            {
+                Console.WriteLine($"用户{user?.Name}离开了，当前已连接{clientUsers.Count}个");
+                clientUsers.Remove(user);
+
+                Clients.All.SendAsync("onlineNum", clientUsers.Count);
+            }
+            return base.OnDisconnectedAsync(exception);
+        }
+
+        #endregion
+    }
+}

ZR.Admin.WebApi/Hubs/OnlineUsers.cs

@@ -0,0 +1,27 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace ZR.Model
+{
+    public class OnlineUsers
+    {
+        /// <summary>
+        /// 客户端连接Id
+        /// </summary>
+        public string ConnnectionId { get; set; }
+        /// <summary>
+        /// 用户id
+        /// </summary>
+        public int Userid { get; set; }
+        public string Name { get; set; }
+        public DateTime LoginTime { get; set; }
+        
+        public OnlineUsers(string clientid, string name)
+        {
+            ConnnectionId = clientid;
+            Name = name;
+            LoginTime = DateTime.Now;
+        }
+    }
+}

ZR.Admin.WebApi/Startup.cs

@@ -15,8 +15,8 @@ using System.Threading.Tasks;
 using ZR.Admin.WebApi.Extensions;
 using ZR.Admin.WebApi.Filters;
 using ZR.Admin.WebApi.Framework;
+using ZR.Admin.WebApi.Hubs;
 using ZR.Admin.WebApi.Middleware;
-using ZR.Common.Cache;
 
 namespace ZR.Admin.WebApi
 {
@@ -43,6 +43,14 @@ namespace ZR.Admin.WebApi
                     .AllowAnyMethod();//允许任意方法
                 });
             });
+            //注入SignalR实时通讯，默认用json传输
+            services.AddSignalR(options =>
+            {
+                //客户端发保持连接请求到服务端最长间隔，默认30秒，改成4分钟，网页需跟着设置connection.keepAliveIntervalInMilliseconds = 12e4;即2分钟
+                //options.ClientTimeoutInterval = TimeSpan.FromMinutes(4);
+                //服务端发保持连接请求到客户端间隔，默认15秒，改成2分钟，网页需跟着设置connection.serverTimeoutInMilliseconds = 24e4;即4分钟
+                //options.KeepAliveInterval = TimeSpan.FromMinutes(2);
+            });
             //消除Error unprotecting the session cookie警告
             services.AddDataProtection()
                 .PersistKeysToFileSystem(new DirectoryInfo(Directory.GetCurrentDirectory() + Path.DirectorySeparatorChar + "DataProtection"));
@@ -96,7 +104,7 @@ namespace ZR.Admin.WebApi
             });
             //开启访问静态文件/wwwroot目录文件，要放在UseRouting前面
             app.UseStaticFiles();
-
+            //开启路由访问
             app.UseRouting();
             app.UseCors("Policy");//要放在app.UseEndpoints前。
 
@@ -107,12 +115,13 @@ namespace ZR.Admin.WebApi
             app.UseAuthentication();
             //2.再开启授权
             app.UseAuthorization();
+            //开启session
             app.UseSession();
+            //开启缓存
             app.UseResponseCaching();
-
+            //恢复/启动任务
-            // 恢复/启动任务
             app.UseAddTaskSchedulers();
-
+            //使用全局异常中间件
             app.UseMiddleware<GlobalExceptionMiddleware>();
 
             app.UseEndpoints(endpoints =>
@@ -120,6 +129,9 @@ namespace ZR.Admin.WebApi
                 endpoints.MapControllerRoute(
                     name: "default",
                     pattern: "{controller=Home}/{action=Index}/{id?}");
+
+                //设置socket连接
+                endpoints.MapHub<MessageHub>("/msgHub");
             });
         }
 

ZR.Vue/.env.development

@@ -7,6 +7,9 @@ VUE_APP_TITLE = 'ZrAdmin.NET后台管理'
 # 开发环境
 VUE_APP_BASE_API = '/dev-api'
 
+#socket API
+VUE_APP_SOCKET_API = '/msgHub'
+
 # 路由前缀
 VUE_APP_ROUTER_PREFIX = '/'
 

ZR.Vue/.env.production

@@ -7,6 +7,9 @@ VUE_APP_TITLE = 'ZrAdmin.NET后台管理'
 # 生产环境
 VUE_APP_BASE_API = '/prod-api'
 
+#socket API
+VUE_APP_SOCKET_API = '/msgHub'
+
 # 路由前缀
 VUE_APP_ROUTER_PREFIX = '/'
 

ZR.Vue/.env.staging

@@ -7,6 +7,9 @@ VUE_APP_TITLE = 'ZrAdmin.NET后台管理'
 # 测试环境
 VUE_APP_BASE_API = '/stage-api'
 
+#socket API
+VUE_APP_SOCKET_API = '/msgHub'
+
 # 路由前缀
 VUE_APP_ROUTER_PREFIX = '/'
 

ZR.Vue/package.json

@@ -19,6 +19,7 @@
     ]
   },
   "dependencies": {
+    "@microsoft/signalr": "^6.0.2",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "^0.21.4",
     "clipboard": "2.0.8",

ZR.Vue/src/main.js

@@ -12,6 +12,7 @@ import store from './store'
 import router from './router'
 import permission from './directive/permission'
 import plugins from './plugins' // plugins
+import signalR from '@/utils/signalR'
 
 import './assets/icons' // icon
 import './permission' // permission control
@@ -43,6 +44,9 @@ Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
 
+signalR.init(process.env.VUE_APP_SOCKET_API);
+Vue.prototype.signalr = signalR
+
 Vue.prototype.msgSuccess = function (msg) {
   this.$message({ showClose: true, message: msg, type: "success" });
 }

ZR.Vue/src/store/getters.js

@@ -16,5 +16,6 @@ const getters = {
   topbarRouters: state => state.permission.topbarRouters,
   defaultRoutes: state => state.permission.defaultRoutes,
   sidebarRouters: state => state.permission.sidebarRouters,
+	onlineUserNum: state => state.socket.onlineNum
 }
 export default getters

ZR.Vue/src/store/index.js

@@ -5,6 +5,7 @@ import user from './modules/user'
 import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
+import socket from './modules/socket'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -21,7 +22,8 @@ const store = new Vuex.Store({
     user,
     tagsView,
     permission,
-    settings
+    settings,
+		socket
   },
   state: state,//这里放全局参数
   getters

ZR.Vue/src/store/modules/socket.js

@@ -0,0 +1,22 @@
+const state = {
+  onlineNum: 0
+}
+const mutations = {
+  SET_ONLINEUSER_NUM: (state, num) => {
+    state.onlineNum = num
+  },
+}
+
+const actions = {
+  //更新在线人数
+  changeOnlineNum({ commit }, data) {
+    commit('SET_ONLINEUSER_NUM', data)
+  },
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

ZR.Vue/src/utils/signalR.js

@@ -0,0 +1,49 @@
+// 官方文档：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'
+import store from '../store'
+
+export default {
+  // signalR对象
+  SR: {},
+  // 失败连接重试次数
+  failNum: 4,
+  baseUrl: '',
+  init(url) {
+    const connection = new signalR.HubConnectionBuilder()
+      .withUrl(url)
+      .build();
+    // console.log('conn', connection);
+    this.SR = connection;
+
+    // 断线重连
+    connection.onclose(async () => {
+      await this.SR.start();
+    })
+
+    connection.on("onlineNum", (data) => {
+			store.dispatch("socket/changeOnlineNum", data);
+    });
+    // 启动
+    this.start();
+  },
+  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);
+    } catch (error) {
+      that.failNum--;
+      console.log(`失败重试剩余次数${that.failNum}`, error)
+      if (that.failNum > 0) {
+        setTimeout(async () => {
+          await this.SR.start()
+        }, 5000);
+      }
+    }
+  }
+}

ZR.Vue/src/views/dashboard/PanelGroup.vue

@@ -7,9 +7,9 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            访客
+            在线用户
           </div>
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="onlineUserNum" :duration="2600" class="card-panel-num" />
         </div>
       </div>
     </el-col>
@@ -56,18 +56,21 @@
 </template>
 
 <script>
-import CountTo from 'vue-count-to'
+import CountTo from "vue-count-to";
-
+import { mapGetters } from "vuex";
 export default {
   components: {
-    CountTo
+    CountTo,
+  },
+  computed: {
+    ...mapGetters(["onlineUserNum"]),
   },
   methods: {
     handleSetLineChartData(type) {
-      this.$emit('handleSetLineChartData', type)
+      this.$emit("handleSetLineChartData", type);
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -86,8 +89,8 @@ export default {
     overflow: hidden;
     color: #666;
     background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
-    border-color: rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, 0.05);
 
     &:hover {
       .card-panel-icon-wrapper {
@@ -107,7 +110,7 @@ export default {
       }
 
       .icon-shopping {
-        background: #34bfa3
+        background: #34bfa3;
       }
     }
 
@@ -124,7 +127,7 @@ export default {
     }
 
     .icon-shopping {
-      color: #34bfa3
+      color: #34bfa3;
     }
 
     .card-panel-icon-wrapper {
@@ -160,7 +163,7 @@ export default {
   }
 }
 
-@media (max-width:550px) {
+@media (max-width: 550px) {
   .card-panel-description {
     display: none;
   }

ZR.Vue/src/views/index_v1.vue

@@ -25,56 +25,54 @@
       </el-col>
     </el-row>
 
-
   </div>
 </template>
 
 <script>
-import PanelGroup from './dashboard/PanelGroup'
+import PanelGroup from "./dashboard/PanelGroup";
-import LineChart from './dashboard/LineChart'
+import LineChart from "./dashboard/LineChart";
-import RaddarChart from './dashboard/RaddarChart'
+import RaddarChart from "./dashboard/RaddarChart";
-import PieChart from './dashboard/PieChart'
+import PieChart from "./dashboard/PieChart";
-import BarChart from './dashboard/BarChart'
+import BarChart from "./dashboard/BarChart";
 
 const lineChartData = {
   newVisitis: {
     expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
+    actualData: [120, 82, 91, 154, 162, 140, 145],
   },
   messages: {
     expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
+    actualData: [180, 160, 151, 106, 145, 150, 130],
   },
   purchases: {
     expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
+    actualData: [120, 90, 100, 138, 142, 130, 130],
   },
   shoppings: {
     expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
+    actualData: [120, 82, 91, 154, 162, 140, 130],
-  }
+  },
-}
+};
-
 export default {
-  name: 'Index',
+  name: "Index",
   components: {
     PanelGroup,
     LineChart,
     RaddarChart,
     PieChart,
-    BarChart
+    BarChart,
   },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      lineChartData: lineChartData.newVisitis,
-    }
+    };
   },
   methods: {
     handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
+      this.lineChartData = lineChartData[type];
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -90,7 +88,7 @@ export default {
   }
 }
 
-@media (max-width:1024px) {
+@media (max-width: 1024px) {
   .chart-wrapper {
     padding: 8px;
   }

ZR.Vue/vue.config.js

@@ -43,6 +43,14 @@ module.exports = {
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: '' //需要rewrite的
+        }
+      },
+			"msgHub": {
+				target: 'http://localhost:8888/msgHub',
+				ws: true,
+				changeOrigin: true,
+				pathRewrite: {
+          ['^/msgHub']: '' //需要rewrite的
         }
 			}
     },