ASP.NET Core SignalR 入门

using Microsoft.AspNetCore.SignalR;  namespace SignalRChat.Hubs {     /// <summary>     /// Hub 类管理连接、组和消息     /// </summary>     public class ChatHub : Hub     {         /// <summary>         /// 可通过已连接客户端调用 SendMessage，以向所有客户端发送消息         /// </summary>         public async Task SendMessage(string user, string message)         {             //Clients.All 向所有的客户端发送消息（服务端调用客户端）             //ReceiveMessage 是客户端监听的方法             await Clients.All.SendAsync("ReceiveMessage", user, message);              /*                 // 常用方法                 // 给所有人发送消息                 await Clients.All.SendAsync("ReceiveMessage", data);                  // 给组里所有人发消息                 await Clients.Group("Users").SendAsync("ReceiveMessage", data);                  // 给调用方法的那个人发消息                 await Clients.Caller.SendAsync("ReceiveMessage", data);                  // 给除了调用方法的以外所有人发消息                 await Clients.Others.SendAsync("ReceiveMessage", data);                  // 给指定connectionId的人发消息                 await Clients.User(connectionId).SendAsync("ReceiveMessage", data);                  // 给指定connectionId的人发消息                 await Clients.Client(connectionId).SendAsync("ReceiveMessage", data);                  // 给指定connectionId的人发消息，同时指定多个connectionId                 await Clients.Clients(IReadOnlyList<> connectionIds).SendAsync("ReceiveMessage", data);             */         }     } }

using SignalRChat.Hubs;  namespace SignalRChat {     public class Program     {         public static void Main(string[] args)         {             var builder = WebApplication.CreateBuilder(args);              //服务注册（往容器中添加服务）             // Add services to the container.             builder.Services.AddControllersWithViews();             builder.Services.AddSignalR(); //SignalR              var app = builder.Build();              //配置Http请求处理管道             // Configure the HTTP request pipeline.             if (!app.Environment.IsDevelopment())             {                 app.UseExceptionHandler("/Home/Error");             }             app.UseStaticFiles();              app.UseRouting();              app.UseAuthorization();              //配置MVC路由             app.MapControllerRoute(                 name: "areas",                 pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");             app.MapControllerRoute(                 name: "default",                 pattern: "{controller=Home}/{action=Index}/{id?}");             app.MapHub<ChatHub>("/chatHub"); //SignalR              app.Run();         }     } }

//第一个参数：加载依赖模块，可以是require_config中定义的短模块名，也可以是完整的模块路径（去掉.js后缀名，根目录为require_config中设置的baseUrl） //第二个参数：执行加载完后的回调函数 require(['../common/base', 'jquery', 'signalr'], function (base, $, signalR) {     let axios = base.axios;      var vm = new base.vue({         el: '#app', //挂载点         mixins: [base.mixin], //混入，类似基类的概念         data: {             connectionSignalR: '', //SignalR连接             user: '',             message: '',             msgList: []         },         //created钩子函数         created: function () {             this.initSignalR(); //初始化SignalR         },         //mounted钩子函数         mounted: function () {             //console.log('This is index mounted');         },         //方法         methods: {             //初始化SignalR             initSignalR: function () {                 var _this = this;                 //创建连接                 _this.connectionSignalR = new signalR.HubConnectionBuilder()                     .withUrl("/chatHub")                     .configureLogging(signalR.LogLevel.Error)                     .build();                 /*                     日志等级：                     signalR.LogLevel.Error：错误消息。 Error仅记录消息。                     signalR.LogLevel.Warning：有关潜在错误的警告消息。 日志 Warning 和 Error 消息。                     signalR.LogLevel.Information：无错误的状态消息。 日志 Information 、 Warning 和 Error 消息。                     signalR.LogLevel.Trace：跟踪消息。 记录所有内容，包括中心和客户端之间传输的数据。                 */                  //监听中心（服务端）发送的消息（服务端调用客户端）                 //ReceiveMessage 是服务端调用客户端的方法名                 _this.connectionSignalR.on("ReceiveMessage", function (user, message) {                     _this.msgList.push({                         user: user,                         message: message                     });                 });                  //启动连接                 _this.connectionSignalR.start().then(function () {                     //启动连接后需要立即执行的逻辑                     //document.getElementById("sendButton").disabled = false;                 }).catch(function (err) {                     return console.error(err.toString());                 });             },             //发送消息             sendMsg: function () {                 var _this = this;                  if (_this.message) {                     //向中心（服务端）发送消息（客户端调用服务端）                     //SendMessage 是服务端定义的的方法                     _this.connectionSignalR.invoke("SendMessage", _this.user, _this.message).catch(function (err) {                         return console.error(err.toString());                     });                     _this.message = ''; //发送完清空消息                 }             },         }     }); });

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

//define用来自定义模块 //第一个参数：加载依赖模块，可以是require_config中定义的短模块名，也可以是完整的模块路径（去掉.js后缀名） //第二个参数：执行加载完后的回调函数 define(['vue', 'axios', '../components/buttonCounter'], function (vue, axios, buttonCounter) {     //TODO 此处可以处理一些公共的逻辑     //vue.component('component-a', { /* ... */ }); //全局注册组件     //vue.mixin({...}); //全局混入      /*         定义组件名的方式有两种：         1、使用 kebab-case (短横线分隔命名)             当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>                  2、使用 PascalCase (首字母大写命名)              当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。             也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。             注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。         */      //Vue.component(...) 的第一个参数为组件名。           vue.component('button-counter', buttonCounter); //全局注册      return {         vue: vue,         axios: axios,          //Vue混入         mixin: {             //数据             data: function () {                 return {                     domain: '', //域名                 }             },             //组件             components: {              },             //created钩子函数             created: function () {                 //console.log('This is base created');                 var _this = this;                 _this.getDomain();             },             //mounted钩子函数             mounted: function () {                 console.log('This is base mounted');             },             //方法             methods: {                 //测试                 doTest: function () {                     console.log('This is base doTest');                 },                 //获取域名                 getDomain: function () {                     var _this = this;                     _this.domain = 'http://localhost:5296';                 },             }         },     }; });

using Microsoft.AspNetCore.Mvc; using SignalRChat.Models; using System.Diagnostics;  namespace SignalRChat.Controllers {     public class HomeController : Controller     {         private readonly ILogger<HomeController> _logger;          public HomeController(ILogger<HomeController> logger)         {             _logger = logger;         }          public IActionResult Index()         {             return View();         }     } }

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>@ViewData["Title"] - SignalRChat</title>      <script src="/js/lib/require.js"></script>     <script src="/js/common/require_config.js"></script>     @await RenderSectionAsync("header", required: false) </head> <body>     <div class="container">         @RenderBody()     </div>     @await RenderSectionAsync("footer", required: false) </body> </html>

@{     ViewData["Title"] = "Home Page"; }  <div id="app">     <template>         <p>             User：<input v-model="user" type="text" />         </p>         <p>             Message: <input v-model="message" type="text" />         </p>         <p>             <button v-on:click="sendMsg">发送</button>         </p>         <hr />         <ul>             <li v-for="(item, index) in msgList" :key="index">                 {{ item.user }} says {{ item.message }}             </li>         </ul>     </template> </div>  @section footer{     <script src="/js/pageScript/chat.js"></script> }

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