第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");

app.Run();

3 SignalR示例：

3.1 SignalRModel

using System.ComponentModel.DataAnnotations;

namespace Linkage.Models

{

    ///

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

    ///

    ///

    /// 摘要：

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

    ///

    public record SignalRModel

    {

        ///

        /// 【用户名】

        ///

        ///

        /// 摘要：

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

        ///

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

        public string UserName { get; set; }

        ///

        /// 【信息】

        ///

        ///

        /// 摘要：

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

        ///

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

        public string Message { get; set; }

    }

}

3.2 ChatHub

using Linkage.Models;

using Microsoft.AspNetCore.SignalR;

namespace Linkage.Hubs

{

    ///

    /// 【聊天中心】

    ///

    ///

    /// 摘要：

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

    ///

    public class ChatHub : Hub

    {

        #region 方法

        ///

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

        ///

        /// 摘要：

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

        ///

        ///

        public Task AllClientResponse()

        {

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

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

        }

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

        ///

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

        ///

        /// 摘要：

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

        ///

        ///

        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 {

   

    <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("" + ` ${data.message}` + "");

                })

            });

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

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

                if (data.userName == 1) {

                    // 向页面添加消息

                    $("#messagesList").append("