首页 > 编程语言 >ASP.NET Core SignalR 系列（三）- JavaScript 客户端

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

时间：2023-07-13 21:55:32浏览次数：43  
标签：Core ASP signalR JavaScript SignalR message 方法 连接 客户端

本章将和大家分享 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）手动重新连接

下面的代码演示典型的手动重新连接方法：

  1. 创建函数（在本例中为 start 函数）以启动连接。
  2. 在连接的 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() 释放锁定。释放锁定时，选项卡可进入睡眠状态。

至此本文就全部介绍完了，想要了解更多内容可参考微软官网。

 

Demo源码：

链接：https://pan.baidu.com/s/1U4IadFp-qThj0t3axrtNJA 
提取码：bwb3

此文由博主精心撰写转载请保留此原文链接：https://www.cnblogs.com/xyh9039/p/17539560.html

版权声明：如有雷同纯属巧合，如有侵权请及时联系本人修改，谢谢！！！

标签：Core,ASP,signalR,JavaScript,SignalR,message,方法,连接,客户端
From： https://www.cnblogs.com/xyh9039/p/17539560.html

相关文章

  • .Net Core Mvc Razor 组件
    目录前言调用页面index.cshtmlPartialUserViewComponent.csIUserServices.csPartialUserView.cshtml注意前言视图组件与分部视图类似，但它们的功能更加强大。视图组件不使用模型绑定，它们依赖于调用视图组件时传递的数据。本文是使用控制器和视图编写的，但视图组件适用于Razo......
  • JavaScript 中获取数组最后一个元素3种方法及性能
    当需要从JavaScript中的数组中获取最后一个元素时，有多种选择，本文将提供3种可用方法。1.数组length属性length属性返回数组中元素的数量。从数组的长度中减去1得到数组最后一个元素的索引，使用它可以访问最后一个元素。从长度中减去1的原因是，在JavaScript中，数组索引......
  • Asp.Net Core 项目实战之权限管理系统使用AdminLTE搭建 -- 系列文章
    0Asp.NetCore项目实战之权限管理系统（0）无中生有1Asp.NetCore项目实战之权限管理系统（1）使用AdminLTE搭建前端2Asp.NetCore项目实战之权限管理系统（2）功能及实体设计3Asp.NetCore项目实战之权限管理系统（3）通过EntityFrameworkCore使用PostgreSQL4Asp.NetCore项目......
  • Authentication With ASP.NET Core Identity
    AuthenticationWithASP.NETCoreIdentity、PreparingtheAuthenticationEnvironmentinourProjectThefirstthing,wearegoingtodoisdisableunauthorizeduserstoaccesstheEmployeesaction.Todothat,wehavetoaddthe[Authorize]attributeonto......
  • User Registration with ASP.NET Core Identity
    UserRegistrationwithASP.NETCoreIdentitySobasically,wehavealltheinputfieldsfromourmodelinthisview.Ofcourse,clickingtheCreatebuttonwilldirectustothePOSTRegistermethodwiththe UserRegistrationModel populated.Now,let’sinst......
  • asp.net core identity tables
      SELECT*FROMdbo.AspNetUsers--hasdataSELECT*FROMdbo.AspNetUserLoginsSELECT*FROMdbo.AspNetUserRoles--hasdataSELECT*FROMdbo.AspNetUserTokensSELECT*FROMdbo.AspNetUserClaimsSELECT*FROMdbo.AspNetRoles--hasdataSELECT*FROMdbo.......
  • Asp.net core中的配置提供程序和读取
    ASP.NETCore中的应用程序配置是使用一个或多个配置提供程序执行的。配置提供程序使用各种配置源从键值对读取配置数据：设置文件，例如appsettings.json环境变量AzureKeyVaultAzure应用程序配置命令行参数已安装或已创建的自定义提供程序目录文件内存中的.NET对象......
  • ASP.NET Core 6框架揭秘实例演示[40]：基于角色的授权
    原文：https://www.cnblogs.com/artech/p/inside-asp-net-core-6-40.htmlASP.NET应用并没有对如何定义授权策略做硬性规定，所以我们完全根据用户具有的任意特性（如性别、年龄、学历、所在地区、宗教信仰、政治面貌等）来判断其是否具有获取目标资源或者执行目标操作的权限，但是针对角色......
  • JavaScript
    引入JavaScript1.内部标签<script></script>2.外部引用<scriptsrc="引入JavaScript.js"></script>浏览器控制台使用1.alert（弹窗）alert();2.console.log(控制台打印)console.log();数据类型1.等于和绝对等于==等于（类型不一样，值相等，判断为true）===绝......
  • net core-异步，同步理解
    并发： 一个车间只有一台机器，所有的工人都需要完成相同的工作，谁先抢到这个机器谁先工作，其余人需要等待。并行： 一个车间有4台机器，有4个工人，四个工人分别使用四台机器，同时执行任务，不用等待其它工人任务执行完毕。单线程： 当有三件事要处理，乙需要在甲之后处理，同时丙需要在乙之......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99