ASP.NET Core SignalR 系列（三）- JavaScript 客户端

本章将和大家分享 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

posted @ 2023-07-13 21:46 谢友海阅读(887) 评论(0) 编辑收藏举报

刷新页面返回顶部

欢迎来到谢友海的博客