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.在前端添加一个标签,用于记录从管道中传过来的数据,如:
<label id="ststisticOnline" style="font-size:smaller;color:grey">人数</label>
4.在wwwroot里添加signalr.js文件,用于在前端使用signalr。具体方法可参考:
中的“添加 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>
然后启动项目,当在线的人数变化时,即可实时显示,如: