第18章 初识SignalR

1 注意：

    在.Net6框架中不必在通过Nuget引用“Microsoft.AspNetCore.SignalR”包，来把SignalR中间件集成到

.Net6框架中了，因为“Microsoft.AspNetCore.SignalR”包已经被弃用，且.Net6框架已经内置集成了SignalR中间件。

2 重构Program.cs

//把内置中间件“SignalR”的实例，依赖注入到.Net(Core)6框架内置容器中。

builder.Services.AddSignalR();

//通过AddRazorRuntimeCompilation依赖注入中间件实现页面修改热加载(Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation)。

builder.Services

    .AddControllersWithViews()

    .AddRazorRuntimeCompilation();

//为内置中间件“SignalR”配置指定的节点("/chatHub"=Linkage.Hubs.ChatHub=“Controllers”)路由，并集成到.Net(Core)6框架内置管道中。

//注意：由于需要使用JavaScript获取路由数据，所以"/chatHub"中的第1个字母必须小写。

app.MapHub<ChatHub>("/chatHub");

app.Run();

3 SignalR示例：

3.1 SignalRModel

using System.ComponentModel.DataAnnotations;

namespace Linkage.Models

{

    /// <summary>

    /// 【SignalR模型--纪录】

    /// </summary>

    /// <remarks>

    /// 摘要：

    ///     为通过SignalR中间件实现信息交互，提供数据支撑。

    /// </remarks>

    public record SignalRModel

    {

        /// <summary>

        /// 【用户名】

        /// <remarks>

        /// </summary>

        /// 摘要：

        ///     获取/设置发送信息的1个指定用户名。

        /// </remarks>

        [Display(Name = "用户名")]

        public string UserName { get; set; }

        /// <summary>

        /// 【信息】

        /// <remarks>

        /// </summary>

        /// 摘要：

        ///     获取/设置1个指定用户名所发送的1条指定信息。

        /// </remarks>

        [Display(Name = "发送信息")]

        public string Message { get; set; }

    }

}

3.2 ChatHub

using Linkage.Models;

using Microsoft.AspNetCore.SignalR;

namespace Linkage.Hubs

{

    /// <summary>

    /// 【聊天中心】

    /// </summary>

    /// <remarks>

    /// 摘要：

    ///     该类通过内置中间件“SignalR”的实例，指定客户的条聊天信息的数据发送到客户端，为页面渲染显示提供数据支撑，

    /// </remarks>

    public class ChatHub : Hub

    {

        #region 方法

        /// <summary>

        /// 【向所有客户端发送系统信息】

        /// <remarks>

        /// 摘要：

        ///     把系统信息的数据发送到客户端，为页面渲染显示提供数据支撑，

        /// </remarks>

        /// </summary>

        public Task AllClientResponse()

        {

            SignalRModel data = new SignalRModel { UserName = "系统", Message = "正在与服务器链接中..." };

            return Clients.All.SendAsync("ReceiveMessage", data);

        }

        /// <param name="signalRModel">SignalR模型纪录的1个指定实例。</param>

        /// <summary>

        /// 【向所有客户端发送聊天信息】

        /// <remarks>

        /// 摘要：

        ///      把1个指定客户的1条聊天信息的数据发送到客户端，为页面渲染显示提供数据支撑，

        /// </remarks>

        /// </summary>

        public async Task SendMessage(SignalRModel signalRModel)

        {

            await Clients.All.SendAsync("ReceiveMessage", signalRModel);

        }

        #endregion

    }

}

3.3SignalRTest\Index.cshtml

@model Linkage.Models.SignalRModel

@{

    ViewData["Title"] = "初识SignalR";

}

<div class="row">

    <div class="col-md-4">

        <form id="SignalRForm">

            <div class="form-group">

                <label asp-for="UserName" class="control-label"></label>

                <input asp-for="UserName" class="form-control" />

            </div>

            <div class="form-group">

                <label asp-for="Message" class="control-label"></label>

                <input asp-for="Message" class="form-control" />

            </div>

            <div class="form-group mt-3">

                <button type="button" id="sendButton" class="btn btn-primary">发 送</button>

            </div>

        </form>

    </div>

</div>

<div class="row mt-3">

    <div class="col-12">

        <h1 id="conntecionState" class="text-center text-danger"></h1>

        <hr />

    </div>

</div>

<div class="row mt-3">

    <div class="col-12">

        <ul id="messagesList" class="nav flex-column"></ul>

    </div>

</div>

@section Scripts {

    <!--引用SignalR中间件的JavaScript库。-->

    <script src="~/lib/signalr/dist/browser/signalr.js"></script>

    <script>

        $(document).ready(function () {

            SignalRInstance();

        });

        //初始化SignalR中间件。

        function SignalRInstance()

        {

            // 初始化路由：通过SignalR中间件的JavaScript包获取指定节点的路由："/chatHub"=Linkage.Hubs.ChatHub。

            var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

            //显示系统连接成功信息(有Bug)。

            connection.start().then(() => {

                connection.invoke("AllClientResponse");

                connection.on("ReceiveMessage", function (data) {

                    if (data.userName == "系统")

                        $("#conntecionState").append("<strong>" + ` ${data.message}` + "</strong>");

                })

            });

            //服务器回调方法，相当于Ajax中的： success: function (data)

            connection.on("ReceiveMessage", function (data) {

                if (data.userName == 1) {

                    // 向页面添加消息

                    $("#messagesList").append("<li class='nav-item bg-danger mb-2'><strong>" + `用户${data.userName}: ${data.message}` + "</strong></li>");

                }

                else if (data.userName == 2) {

                    // 向页面添加消息

                    $("#messagesList").append("<li class='nav-item bg-success mb-2'><strong>" + `用户${data.userName}: ${data.message}` + "</strong></li>");

                }

                else if (data.userName != "系统") {

                    // 向页面添加消息

                    $("#messagesList").append("<li class='nav-item bg-warning mb-2'><strong>" + `用户${data.userName}: ${data.message}` + "</strong></li>");

                }

            })

            //指定节点的路由："/chatHub"=Linkage.Hubs.ChatHub，通过SignalR中间件，把信息在页面上进行渲染显示。

            connection.start();

            //单击事件,最好定义在“ SignalRInstance()”方法之外。

            $("#sendButton").click(function () {

                //注意：SignalR中间件的JavaScript包获不支持：$("#SignalRForm").serialize();

                connection.invoke("SendMessage", { UserName: $("#UserName").val(), Message: $("#Message").val() });

                // 清空输入框信息并获取焦点。

                $("#Message").val("").focus();

            });

        

        }

    </script>

}

4 参考：

    1、“ASP.NET Core SignalR 入门 | Microsoft Learn”。

    2、“【SignalR全套系列】之在.Net6中实SignalR通信 (qq.com)”。

    3、“SignalR系列文章02---netCoreMvc创建Demo - 爱生活，爱代码 - 博客园 (cnblogs.com)”。

对以上功能更为具体实现和注释见：221029_18Linkage(初识SignalR)。