- A+
本章将和大家分享 ASP.NET Core SignalR 中的 JavaScript 客户端。ASP.NET Core SignalR JavaScript 客户端库使开发人员能够调用服务器端SignalR中心代码。
本文大部分内容摘自微软官网：https://learn.microsoft.com/zh-cn/aspnet/core/signalr/javascript-client?view=aspnetcore-7.0&tabs=visual-studio
废话不多说，下面我们直接进入本章主题：
1、安装 SignalR 客户端包
ASP.NET Core 共享框架中包含 SignalR 服务器库。JavaScript 客户端库不会自动包含在项目中。对于此教程，使用库管理器 (LibMan) 从 unpkg 获取客户端库。unpkg 是一个快速的全局内容分发网络，适用于 npm 上的所有内容。
在 Visual Studio “解决方案资源管理器” 中，右键单击项目，然后选择 “添加” => “客户端库”。
在“添加客户端库”对话框中：
- 为“提供程序”选择“unpkg”。
- 对于“库”，请输入 @microsoft/signalr@latest。
- 选择“选择特定文件”，展开“dist/browser”文件夹，然后选择 signalr.js 和 signalr.min.js。
- 将“目标位置”设置为 wwwroot/js/signalr/。（可根据实际情况进行修改）
- 选择“安装” 。
LibMan 会创建 wwwroot/js/signalr 文件夹并将所选文件复制到该文件夹下。
2、连接到中心
以下代码创建并启动连接。中心的名称不区分大小写：
//第一个参数：加载依赖模块，可以是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; var domain = "http://localhost:5296"; //网站域名 //创建连接 _this.connectionSignalR = new signalR.HubConnectionBuilder() .withUrl(domain + "/chatHub") //跨域的话必须使用绝对路径 .configureLogging(signalR.LogLevel.Error) //配置日志等级 //自动重新连接，尝试每次重新连接之前默认分别等待 0、2、10 和 30 秒。尝试四次失败后，它会停止尝试重新连接。 .withAutomaticReconnect() //.withAutomaticReconnect([0, 2000, 10000, 30000]) .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 = ''; //发送完清空消息 } }, } }); });
3、跨域连接（CORS）
通常，浏览器从与请求页面相同的域加载连接。但是，有时需要连接到另一个域。
发出跨域请求时，客户端代码必须使用绝对 URL 而不是相对 URL。对于跨域请求，需要将 .withUrl("/chathub") 修改为 .withUrl("https://{App domain name}/chathub") 。
为了防止恶意站点从另一站点读取敏感数据，默认情况下禁用跨域连接。若要允许跨源请求，请启用 CORS：
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 服务 //设置允许跨域 builder.Services.AddCors(options => { options.AddDefaultPolicy( builder => { builder.WithOrigins("http://localhost:5296", "http://localhost:8080") .AllowAnyHeader() .WithMethods("GET", "POST") .AllowCredentials(); }); }); var app = builder.Build(); //配置Http请求处理管道 // Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Home/Error"); } app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); //设置允许跨域 // UseCors must be called before MapHub. //必须在 MapHub 之前调用 UseCors 方法 app.UseCors(); //配置MVC路由 app.MapControllerRoute( name: "areas", pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}"); app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); //配置SignalR终结点 app.MapHub<ChatHub>("/chatHub"); //中心 app.MapHub<StronglyTypedChatHub>("/stronglyTypedChatHub"); //强类型中心 app.Run(); } } }
必须在 MapHub 之前调用 app.UseCors(); 方法。
4、从客户端调用中心方法
JavaScript 客户端通过 HubConnection 的 invoke 方法调用中心的公共方法。invoke 方法接受：
- 中心方法的名称。
- 中心方法中定义的任何参数。
在以下突出显示的代码中，中心上的方法名称为 SendMessage。传递到 invoke 的第二个和第三个参数映射到中心方法的 user 和 message 参数：
try { await connection.invoke("SendMessage", user, message); } catch (err) { console.error(err); }
仅在默认模式下使用 Azure SignalR 服务 时，才支持从客户端调用中心方法。
invoke 方法返回 JavaScript Promise。 服务器上的方法返回时，Promise 通过返回值（如果有）进行解析。如果服务器上的方法引发错误，Promise 会被拒绝并显示错误消息。使用 async 和 await 或 Promise 的 then 和 catch 方法来处理这些情况。
JavaScript 客户端还可以通过 HubConnection 的 send 方法调用中心的公共方法。与 invoke 方法不同，send 方法不会等待来自服务器的响应。send 方法返回 JavaScript Promise。当消息发送到服务器后，会解析 Promise。如果发送消息时出错，Promise 会被拒绝并显示错误消息。使用 async 和 await 或 Promise 的 then 和 catch 方法来处理这些情况。
使用 send 不会等到服务器收到消息。因此，无法从服务器返回数据或错误。
5、从中心调用客户端方法
若要接收来自中心的消息，请使用 HubConnection 的 on 方法定义方法：
- JavaScript 客户端方法的名称。
- 中心传递给方法的参数。
在下面的示例中，方法名称为 ReceiveMessage。参数名称为 user 和 message：
connection.on("ReceiveMessage", (user, message) => { const li = document.createElement("li"); li.textContent = `${user}: ${message}`; document.getElementById("messageList").appendChild(li); });
connection.on 中的上述代码在服务器端代码使用 SendAsync 方法调用它时运行：
using Microsoft.AspNetCore.SignalR; namespace SignalRChat.Hubs; public class ChatHub : Hub { public async Task SendMessage(string user, string message) { await Clients.All.SendAsync("ReceiveMessage", user, message); } }
SignalR 通过匹配在 SendAsync 和 connection.on 中定义的方法名称和参数来确定要调用的客户端方法。
客户端的最佳做法是在 on 之后 调用 HubConnection 的 start 方法。这样做可确保在收到任何消息之前注册处理程序。
6、错误处理和日志记录
使用 console.error 在客户端无法连接或发送消息时将错误输出到浏览器的控制台：
try { await connection.invoke("SendMessage", user, message); } catch (err) { console.error(err); }
在建立连接时，通过传递记录器和要记录的事件类型来设置客户端日志跟踪。可用的日志级别如下所示：
- signalR.LogLevel.Error：错误消息。仅记录 Error 消息。
- signalR.LogLevel.Warning：有关潜在错误的警告消息。记录 Warning 和 Error 消息。
- signalR.LogLevel.Information：没有错误的状态消息。记录 Information、Warning 和 Error 消息。
- signalR.LogLevel.Trace：跟踪消息。记录所有内容，包括在中心和客户端之间传输的数据。
使用 HubConnectionBuilder 上的 configureLogging 方法配置日志级别。消息将记录到浏览器控制台：
const connection = new signalR.HubConnectionBuilder() .withUrl("/chathub") .configureLogging(signalR.LogLevel.Information) .build();
7、重新连接客户端
1）自动重新连接
默认情况下，它不会自动重新连接。如果需要自动重新连接，则可以将 SignalR 的 JavaScript 客户端配置为使用 HubConnectionBuilder 上的 WithAutomaticReconnect 方法。
const connection = new signalR.HubConnectionBuilder() .withUrl("/chathub") .withAutomaticReconnect() .build();
如果不使用任何参数，WithAutomaticReconnect 会将客户端配置为每次尝试重新连接之前分别等待 0、2、10 和 30 秒。尝试四次失败后，会停止尝试重新连接。
配置自定义的重新连接尝试次数，withAutomaticReconnect 会接受一个数字数组，表示在每次开始尝试重新连接之前要等待的延迟（以毫秒为单位）：
const connection = new signalR.HubConnectionBuilder() .withUrl("/chathub") .withAutomaticReconnect([0, 0, 10000]) .build(); // .withAutomaticReconnect([0, 2000, 10000, 30000]) yields the default behavior
若要更好地控制自动重新连接尝试的时间和次数，可以自行去微软官网了解。
2）手动重新连接
下面的代码演示典型的手动重新连接方法：
- 创建函数（在本例中为 start 函数）以启动连接。
- 在连接的 onclose 事件处理程序中调用 start 函数。
async function start() { try { await connection.start(); console.log("SignalR Connected."); } catch (err) { console.log(err); setTimeout(start, 5000); } }; connection.onclose(async () => { await start(); });
生产实现通常使用指数退避或重试指定的次数。
8、浏览器睡眠选项卡
某些浏览器具有选项卡冻结或休眠功能，用于减少非活动选项卡的计算机资源使用量。 这可能会导致 SignalR 连接关闭，并可能导致不必要的用户体验。
浏览器使用启发法判断选项卡是否应进入睡眠状态，下面的代码示例演示如何使用 Web Lock 将选项卡保持为唤醒状态，并避免意外的连接关闭：
var lockResolver; if (navigator && navigator.locks && navigator.locks.request) { const promise = new Promise((res) => { lockResolver = res; }); navigator.locks.request('unique_lock_name', { mode: "shared" }, () => { return promise; }); }
对于上述代码示例：
- Web Lock 是实验性的。条件检查可确认浏览器是否支持 Web Lock。
- 存储承诺解析程序 lockResolver，以便在选项卡进入睡眠状态时可以释放锁。
- 关闭连接时，通过调用 lockResolver() 释放锁定。释放锁定时，选项卡可进入睡眠状态。
9、SignalR 信息推送的两种通道
1）客户端触发推送，如下所示：
2）服务端触发推送，如下所示：
至此本文就全部介绍完了，想要了解更多内容可参考微软官网。
Demo源码：
链接：https://pan.baidu.com/s/1U4IadFp-qThj0t3axrtNJA 提取码：bwb3
此文由博主精心撰写转载请保留此原文链接：https://www.cnblogs.com/xyh9039/p/17539560.html
版权声明：如有雷同纯属巧合，如有侵权请及时联系本人修改，谢谢！！！
![[C#] Bgr24彩色位图转为灰度的Bgr24位图的跨平台SIMD硬件加速向量算法](https://www.ztsky.cn/wp-content/themes/ztsky/img/random/6.jpg)
