.net mvc（C#）使用SignalR实时统计在线人数

稻园

已于 2024-09-26 14:27:20 修改

阅读量822

点赞数 9

CC 4.0 BY-SA版权

文章标签： .net mvc c#

于 2024-09-23 15:02:04 首次发布

本文链接：https://blog.youkuaiyun.com/loody1/article/details/142457412

signalr用于前后端的实时通信，语法简洁。但搞清楚原理需要付出一些时间。本文通过signalr实时统计系统在线人数，较读session、轮询等方法更新速度快、节省资源、结果准确

核心：通过重写SignalR的OnConnectedAsync事件统计登录人数、OnDisconnectedAsync事件统计下线人数。当然您也可以在以上两个事件中定义其他涉及登录、登出的内容，不只统计在线人数。具体步骤如下：

0.新建一个ASP.NET Core MVC项目

1.在项目中添加一个cs文件，用于建立SignalR中心，以提供实时处理登录、下线数据，及连接前端的管道。SignalR是aspnetcore框架自带的，因此无需引入新包。代码如下：

using Microsoft.AspNetCore.SignalR;
namespace WebApplication1.SignalRHubs
{
    public class StatisticOnline : Hub //继承自Microsoft.AspNetCore.SignalR.Hub
    {
        public static int onLine = 0; //用于记录在线人数
        public override async Task OnConnectedAsync() //登录（建立新的连接）时，人数加1，并向所有的用户发消息
        {
            onLine += 1;
            await Clients.All.SendAsync("ReceiveOnlineNo", onLine.ToString());
            await base.OnConnectedAsync();
        }
        public override async Task OnDisconnectedAsync(Exception? exception) //登出系统（连接断开）时，人数减1，并向所有的用户发消息
        {
            onLine -= 1;
            await Clients.All.SendAsync("ReceiveOnlineNo", onLine.ToString());
            Exception? temp = new Exception();
            await base.OnDisconnectedAsync(temp);
        }
    }
}

2.在program.cs中注册SignalR

（1/2）注册signalr，如下：

var builder = WebApplication.CreateBuilder(args); //在这句之后
builder.Services.AddSignalR(); //注册signalr中心，用于实时统计、显示在线人数
var app = builder.Build(); //在这句之前

（2/2）添加路由

var app = builder.Build();//在这句之后
app.MapHub<StatisticOnline>("/signalrhubs/StatisticOnline"); //其中“StatisticOnline”是signal R中的类的名字。“/signalrhubs/StatisticOnline”是用于拼接在.net mvc网站的域名后面，用于访问signalr中心的
app.Run(); //在这句之前

3.在前端添加一个标签，用于记录从管道中传过来的数据，如：

4.在wwwroot里添加signalr.js文件，用于在前端使用signalr。具体方法可参考：

https://learn.microsoft.com/zh-cn/aspnet/core/tutorials/signalr?view=aspnetcore-8.0&WT.mc_id=dotnet-35129-website&tabs=visual-studio#add-the-signalr-client-library

中的“添加 SignalR 客户端库”章节。或者自己下载一个放在wwwroot中亦可

5.在前端引用第四步中添加的js库，如：

<script src="/microsoft-signalr/signalr.min.js"></script>

6.在前端编写连接signalr中心的js，并添加的window.onload中

<script>
    window.onload = async function () { //在页面启动后，即连接signalr
        await CreateSignalRConn();
    }
    async function CreateSignalRConn() {
        let signalRConn; //初始化连接的名称
        signalRConn = new signalR.HubConnectionBuilder().withUrl("https://域名（IP）:端口（如需要）/signalrhubs/StatisticOnline").build(); //规定连接参数
        await signalRConn.start(); //启动连接
        
        signalRConn.on("ReceiveOnlineNo", (onLineNo) => { //监听signalr端口即可
            document.getElementById("ststisticOnline").innerHTML = "（当前在线：" + onLineNo + "人）"; //实时更新lable标签中的内容（显示当前在线人数）
        });
    }
</script>

然后启动项目，当在线的人数变化时，即可实时显示，如：