ASP.NET Core SignalR 入门

殷小平

本章将和大家分享使用 SignalR 生成实时应用的基础知识。通过本文您将学习如何：使用ASP.NET Core SignalR + MVC + Vue 2.x + require 最终创建一个正常运行的简易聊天应用。
废话不多说，我们直接来看一个Demo，Demo的目录结构如下所示：

本Demo的Web项目为ASP.NET Core Web 应用程序（目标框架为.NET 7.0） MVC项目。  
1、创建 SignalR 中心

中心是一个类，用作处理客户端 - 服务器通信的高级管道。
可通过已连接客户端调用 SendMessage，以向所有客户端发送消息。

1. using Microsoft.AspNetCore.SignalR;
3. namespace SignalRChat.Hubs
4. {
5.     /// <summary>
6.     /// Hub 类管理连接、组和消息
7.     /// </summary>
8.     public class ChatHub : Hub
9.     {
10.         /// <summary>
11.         /// 可通过已连接客户端调用 SendMessage，以向所有客户端发送消息
12.         /// </summary>
13.         public async Task SendMessage(string user, string message)
14.         {
15.             //Clients.All 向所有的客户端发送消息（服务端调用客户端）
16.             //ReceiveMessage 是客户端监听的方法
17.             await Clients.All.SendAsync("ReceiveMessage", user, message);
19.             /*
20.                 // 常用方法
21.                 // 给所有人发送消息
22.                 await Clients.All.SendAsync("ReceiveMessage", data);
24.                 // 给组里所有人发消息
25.                 await Clients.Group("Users").SendAsync("ReceiveMessage", data);
27.                 // 给调用方法的那个人发消息
28.                 await Clients.Caller.SendAsync("ReceiveMessage", data);
30.                 // 给除了调用方法的以外所有人发消息
31.                 await Clients.Others.SendAsync("ReceiveMessage", data);
33.                 // 给指定connectionId的人发消息
34.                 await Clients.User(connectionId).SendAsync("ReceiveMessage", data);
36.                 // 给指定connectionId的人发消息
37.                 await Clients.Client(connectionId).SendAsync("ReceiveMessage", data);
39.                 // 给指定connectionId的人发消息，同时指定多个connectionId
40.                 await Clients.Clients(IReadOnlyList<> connectionIds).SendAsync("ReceiveMessage", data);
41.             */
42.         }
43.     }
44. }

复制代码

2、配置 SignalR

必须将 SignalR 服务器配置为将 SignalR 请求传递给 SignalR。 将以下突出显示（标红）的代码添加到 Program.cs 文件。

1. using SignalRChat.Hubs;
3. namespace SignalRChat
4. {
5.     public class Program
6.     {
7.         public static void Main(string[] args)
8.         {
9.             var builder = WebApplication.CreateBuilder(args);
11.             //服务注册（往容器中添加服务）
12.             // Add services to the container.
13.             builder.Services.AddControllersWithViews();
14.             builder.Services.AddSignalR(); //SignalR
16.             var app = builder.Build();
18.             //配置Http请求处理管道
19.             // Configure the HTTP request pipeline.
20.             if (!app.Environment.IsDevelopment())
21.             {
22.                 app.UseExceptionHandler("/Home/Error");
23.             }
24.             app.UseStaticFiles();
26.             app.UseRouting();
28.             app.UseAuthorization();
30.             //配置MVC路由
31.             app.MapControllerRoute(
32.                 name: "areas",
33.                 pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");
34.             app.MapControllerRoute(
35.                 name: "default",
36.                 pattern: "{controller=Home}/{action=Index}/{id?}");
37.             app.MapHub<ChatHub>("/chatHub"); //SignalR
39.             app.Run();
40.         }
41.     }
42. }

复制代码

以上突出显示（标红）的代码将 SignalR 添加到 ASP.NET Core 依赖关系注入和路由系统。
3、添加 SignalR 客户端代码

chat.js 文件，核心 JavaScript 代码如下：

1. //第一个参数：加载依赖模块，可以是require_config中定义的短模块名，也可以是完整的模块路径（去掉.js后缀名，根目录为require_config中设置的baseUrl）
2. //第二个参数：执行加载完后的回调函数
3. require(['../common/base', 'jquery', 'signalr'], function (base, $, signalR) {
4.     let axios = base.axios;
6.     var vm = new base.vue({
7.         el: '#app', //挂载点
8.         mixins: [base.mixin], //混入，类似基类的概念
9.         data: {
10.             connectionSignalR: '', //SignalR连接
11.             user: '',
12.             message: '',
13.             msgList: []
14.         },
15.         //created钩子函数
16.         created: function () {
17.             this.initSignalR(); //初始化SignalR
18.         },
19.         //mounted钩子函数
20.         mounted: function () {
21.             //console.log('This is index mounted');
22.         },
23.         //方法
24.         methods: {
25.             //初始化SignalR
26.             initSignalR: function () {
27.                 var _this = this;
28.                 //创建连接
29.                 _this.connectionSignalR = new signalR.HubConnectionBuilder()
30.                     .withUrl("/chatHub")
31.                     .configureLogging(signalR.LogLevel.Error)
32.                     .build();
33.                 /*
34.                     日志等级：
35.                     signalR.LogLevel.Error：错误消息。 Error仅记录消息。
36.                     signalR.LogLevel.Warning：有关潜在错误的警告消息。 日志 Warning 和 Error 消息。
37.                     signalR.LogLevel.Information：无错误的状态消息。 日志 Information 、 Warning 和 Error 消息。
38.                     signalR.LogLevel.Trace：跟踪消息。 记录所有内容，包括中心和客户端之间传输的数据。
39.                 */
41.                 //监听中心（服务端）发送的消息（服务端调用客户端）
42.                 //ReceiveMessage 是服务端调用客户端的方法名
43.                 _this.connectionSignalR.on("ReceiveMessage", function (user, message) {
44.                     _this.msgList.push({
45.                         user: user,
46.                         message: message
47.                     });
48.                 });
50.                 //启动连接
51.                 _this.connectionSignalR.start().then(function () {
52.                     //启动连接后需要立即执行的逻辑
53.                     //document.getElementById("sendButton").disabled = false;
54.                 }).catch(function (err) {
55.                     return console.error(err.toString());
56.                 });
57.             },
58.             //发送消息
59.             sendMsg: function () {
60.                 var _this = this;
62.                 if (_this.message) {
63.                     //向中心（服务端）发送消息（客户端调用服务端）
64.                     //SendMessage 是服务端定义的的方法
65.                     _this.connectionSignalR.invoke("SendMessage", _this.user, _this.message).catch(function (err) {
66.                         return console.error(err.toString());
67.                     });
68.                     _this.message = ''; //发送完清空消息
69.                 }
70.             },
71.         }
72.     });
73. });

复制代码

公共脚本文件代码如下：
其中 require_config.js 文件代码如下：

1. //主要用来配置模块的加载位置（设置短模块名）
2. require.config({
3.     baseUrl: '/js/lib', //设置根目录
4.     paths: { //如果没有设置根目录则需要填写完整路径
5.         'vue': 'vue',
6.         'axios': 'axios',
7.         'jquery': 'jquery-3.6.3',
8.         'signalr': 'signalr',
9.         //paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库，如下：
10.         //'jquery': ['http://libs.baidu.com/jquery/2.0.3/jquery', '/js/lib/jquery-3.6.3'],
11.     }
12. });

复制代码

其中 base.js 文件代码如下：

1. //define用来自定义模块
2. //第一个参数：加载依赖模块，可以是require_config中定义的短模块名，也可以是完整的模块路径（去掉.js后缀名）
3. //第二个参数：执行加载完后的回调函数
4. define(['vue', 'axios', '../components/buttonCounter'], function (vue, axios, buttonCounter) {
5.     //TODO 此处可以处理一些公共的逻辑
6.     //vue.component('component-a', { /* ... */ }); //全局注册组件
7.     //vue.mixin({...}); //全局混入
9.     /*
10.         定义组件名的方式有两种：
11.         1、使用 kebab-case (短横线分隔命名)
12.             当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>
13.         
14.         2、使用 PascalCase (首字母大写命名)
15.             当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
16.             也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
17.             注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。   
18.     */
20.     //Vue.component(...) 的第一个参数为组件名。      
21.     vue.component('button-counter', buttonCounter); //全局注册
23.     return {
24.         vue: vue,
25.         axios: axios,
27.         //Vue混入
28.         mixin: {
29.             //数据
30.             data: function () {
31.                 return {
32.                     domain: '', //域名
33.                 }
34.             },
35.             //组件
36.             components: {
38.             },
39.             //created钩子函数
40.             created: function () {
41.                 //console.log('This is base created');
42.                 var _this = this;
43.                 _this.getDomain();
44.             },
45.             //mounted钩子函数
46.             mounted: function () {
47.                 console.log('This is base mounted');
48.             },
49.             //方法
50.             methods: {
51.                 //测试
52.                 doTest: function () {
53.                     console.log('This is base doTest');
54.                 },
55.                 //获取域名
56.                 getDomain: function () {
57.                     var _this = this;
58.                     _this.domain = 'http://localhost:5296';
59.                 },
60.             }
61.         },
62.     };
63. });

复制代码

控制器和视图文件代码如下：
其中 HomeController 控制器代码如下：

1. using Microsoft.AspNetCore.Mvc;
2. using SignalRChat.Models;
3. using System.Diagnostics;
5. namespace SignalRChat.Controllers
6. {
7.     public class HomeController : Controller
8.     {
9.         private readonly ILogger<HomeController> _logger;
11.         public HomeController(ILogger<HomeController> logger)
12.         {
13.             _logger = logger;
14.         }
16.         public IActionResult Index()
17.         {
18.             return View();
19.         }
20.     }
21. }

复制代码

其中布局页 _Layout.cshtml 视图文件代码如下：

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="utf-8" />
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6.     <title>@ViewData["Title"] - SignalRChat</title>
8.    
9.    
10.     @await RenderSectionAsync("header", required: false)
11. </head>
12. <body>
13.    
14.         @RenderBody()
15.    
16.     @await RenderSectionAsync("footer", required: false)
17. </body>
18. </html>

复制代码

其中 Index.cshtml 视图文件代码如下：

1. @{
2.     ViewData["Title"] = "Home Page";
3. }
6.     <template>
7.         <p>
8.             User：<input v-model="user" type="text" />
9.         </p>
10.         <p>
11.             Message: <input v-model="message" type="text" />
12.         </p>
13.         <p>
14.             <button v-on:click="sendMsg">发送</button>
15.         </p>
16.         <hr />
17.         <ul>
18.             <li v-for="(item, index) in msgList" :key="index">
19.                 {{ item.user }} says {{ item.message }}
20.             </li>
21.         </ul>
22.     </template>
25. @section footer{
26.    
27. }

复制代码

4、运行应用

此处我使用的是 .NET Core CLI  命令行的方式来运行应用，如下所示：

打开两个浏览器实例，分别访问：http://localhost:5296/ ， 运行结果如下：

选择任一浏览器，输入名称和消息，然后点击“发送”按钮：

可以发现，两个页面上会立即显示名称和消息。 
更多关于 ASP.NET Core SignalR 的相关知识可参考微软官方文档：https://learn.microsoft.com/zh-cn/aspnet/core/tutorials/signalr?view=aspnetcore-7.0&tabs=visual-studio
至此本文就全部介绍完了，如果觉得对您有所启发请记得点个赞哦！！！
 
Demo源码：

1. 链接：https://pan.baidu.com/s/13ppUjr0h2dse5vnw5uiZ9Q
2. 提取码：qm2a

复制代码

此文由博主精心撰写转载请保留此原文链接：https://www.cnblogs.com/xyh9039/p/17520659.html
版权声明：如有雷同纯属巧合，如有侵权请及时联系本人修改，谢谢！！！

来源:https://www.cnblogs.com/xyh9039/archive/2023/07/02/17520659.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！