.NET Core使用SignalR做登录、推送

过多介绍我就不叙述了，奉上官方文档

本文使用的是.NET Core 3.1版本，创建SignalR的服务端和客户端，结构如下：

 

一、创建服务端

用VS2019创建一个空的Web应用程序，命名为SignalRServer

1. 添加ResultModel类：

    public class ResultModel
    {
        public int Status { get; set; }
        public string Message { get; set; }
        public List<UserModel> OnlineUser { get; set; }
    }

2.  添加UserModel类：

    public class UserModel
    {
        public string ID { get; set; }
        public string UserName { get; set; }
        public string Password { get; set; }
        public string GroupName { get; set; }
    }

3.  添加ChatHub类：

    public class ChatHub : Hub
    {
        /// <summary>
        /// 已登录的用户信息
        /// </summary>
        public static List<UserModel> OnlineUser { get; set; } = new List<UserModel>();

        /// <summary>
        /// 模拟存放在数据库里的用户信息
        /// </summary>
        private static readonly List<UserModel> _dbuser = new List<UserModel> {
          new UserModel{
            UserName = "test1", Password = "111", GroupName = "Group1"
          },
          new UserModel{
            UserName = "test2", Password = "111", GroupName = "Group2"
          },
          new UserModel{
            UserName = "test3", Password = "111", GroupName = "Group2"
          },
          new UserModel{
            UserName = "test4", Password = "111", GroupName = "Group1"
          },
          new UserModel{
            UserName = "test5", Password = "111", GroupName = "Group3"
          },
        };

        /// <summary>
        /// 登录验证
        /// </summary>
        public async Task Login(string username, string password)
        {
            string connid = Context.ConnectionId;
            ResultModel result = new ResultModel
            {
                Status = 0,
                Message = "登录成功！"
            };
            if (!OnlineUser.Exists(u => u.ID == connid))
            {
                var model = _dbuser.Find(u => u.UserName == username && u.Password == password);
                if (model != null)
                {
                    model.ID = connid;
                    OnlineUser.Add(model);
                    //给当前的连接分组
                    await Groups.AddToGroupAsync(connid, model.GroupName);
                }
                else
                {
                    result.Status = 1;
                    result.Message = "账号或密码错误！";
                }
            }
            //给当前连接返回消息
            await Clients.Client(connid).SendAsync("LoginResponse", result);
        }

        /// <summary>
        /// 获取所在组的在线用户
        /// </summary>
        public async Task GetUsers()
        {
            var model = OnlineUser.Find(u => u.ID == Context.ConnectionId);
            ResultModel result = new ResultModel();
            if (model == null)
            {
                result.Status = 1;
                result.Message = "请先登录！";
            }
            else
            {
                result.OnlineUser = OnlineUser.FindAll(u => u.GroupName == model.GroupName);
            }
            //给所在组返回消息
            await Clients.Group(model.GroupName).SendAsync("GetUsersResponse", result);
        }

        public async Task SendMessage(string user, string message)
        {
            ResultModel result = new ResultModel();
            var model = OnlineUser.Find(u => u.ID == Context.ConnectionId);
            if (model == null)
            {
                result.Status = 1;
                result.Message = "请先登录！";
            }
            else
            {
                result.Status = 0;
                result.Message = $"“{user}”发送的消息：{message}";
            }
            await Clients.Group(model.GroupName).SendAsync("SendMessageResponse", result);
        }

        public override Task OnConnectedAsync()
        {
            return base.OnConnectedAsync();
        }

        /// <summary>
        /// 当连接断开时的处理
        /// </summary>
        public override Task OnDisconnectedAsync(Exception exception)
        {
            string connid = Context.ConnectionId;
            var model = OnlineUser.Find(u => u.ID == connid);
            int count = OnlineUser.RemoveAll(u => u.ID == connid);
            if (model != null)
            {
                ResultModel result = new ResultModel()
                {
                    Status = 0,
                    OnlineUser = OnlineUser.FindAll(u => u.GroupName == model.GroupName)
                };
                Clients.Group(model.GroupName).SendAsync("GetUsersResponse", result);
            }
            return base.OnDisconnectedAsync(exception);
        }
    }

可以重写基类的两个方法：

OnConnectedAsync 当连接成功时执行
OnDisconnectedAsync 当连接断开时执行，关闭、刷新 浏览器或标签页都会执行

服务端发送给客户端的信息，我是通过分组推送，就是在同一个组里的用户才会收到（类似群聊）：

Clients.Group(groupName).SendAsync();

也可以所有在线用户都收到：

Clients.All.SendAsync();

4. Startup类的配置如下：

    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(options => options.AddPolicy("CorsPolicy",
            builder =>
            {
                builder.AllowAnyMethod().AllowAnyHeader()
                       .WithOrigins("https://localhost:44395")
                       .AllowCredentials();
            }));

            services.AddSignalR();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseRouting();

            app.UseCors("CorsPolicy");

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapGet("/", async context =>
                {
                    await context.Response.WriteAsync("Hello World!");
                });
                endpoints.MapHub<ChatHub>("/chatHub");
            });
        }
    }

注意：跨域是要指定地址的，不能是全部，否则客户端无法连接；当前你先留空，等客户端建立好了记得回来修改。

二、创建客户端

用VS2019创建一个空的Web应用程序，命名为SignalRClient

1. 新建文件夹，命名为wwwroot（如果不是这个名字，需要在中间件中指定了）

2. chat.js代码如下，注意withUrl中的地址，改为你的SignalRServer实际运行成功后的地址

"use strict";

var connection = new signalR.HubConnectionBuilder()
    .withUrl("https://localhost:44317/chatHub")
    .withAutomaticReconnect() //断线自动重连
    .build();

connection.start();

//自动重连成功后的处理
connection.onreconnected(connectionId => {
    alert(connectionId);
});


//---消息---
document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

connection.on("SendMessageResponse", function (res) {
    if (res && res.status == 0) {
        var li = document.createElement("li");
        li.textContent = res.message;
        document.getElementById("messagesList").appendChild(li);
    } else {
        alert(res.message);
    }
});
//---消息---


//---登录---
document.getElementById("btnLogin").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("Login", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

connection.on("LoginResponse", function (res) {
    if (res && res.status == 0) {
        sessionStorage.setItem('curuser', res.data);
        alert(res.message);
        getUsers();
    }
    else {
        alert('登录失败！');
    }
});
//---登录---


//获取在线用户
function getUsers() {
    connection.invoke("GetUsers").catch(function (err) {
        return console.error(err.toString());
    });
    connection.on("GetUsersResponse", function (res) {
        if (res && res.status == 0) {
            var _lis = '<li>在线用户：</li>';
            for (var i = 0; i < res.onlineUser.length; i++) {
                _lis += `<li>${res.onlineUser[i].userName}</li>`;
            }
            document.getElementById("usersList").innerHTML = _lis;
        }
    });
}

3. signalr的js库，你可以自行下载；或者“项目右键 -> 添加 -> 客户端库”；

    提供程序改为“unpkg”，输入“@microsoft/signalr”按回车搜索，勾选自己需要的，最后注意存放的位置

    

4. 创建页面：新建一个HomeController，添加视图，去掉布局页勾选

Index.cshtml代码如下：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <input id="userInput" type="text" /><br />
        <input id="messageInput" type="text" /><br />
        <input id="btnLogin" type="button" value="登录" />
        <input id="sendButton" type="button" value="发送" />
    </div>
    <ul id="usersList">
    </ul>
    <ul id="messagesList">
    </ul>
    <script src="~/lib/signalr/signalr.js"></script>
    <script src="~/js/chat.js"></script>
</body>
</html>

5. Startup类的配置如下：

    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }

服务端跑起来，客户端跑起来，最后来看下效果：

（test1和test4是一组的，注意它们的变化，test5的组只有它一个，所以它收不到其它用户的消息）

本文代码：https://files.cnblogs.com/files/shousiji/SignalRDemo.rar