ASP.NET Core SignalR ：SignalR Javascript 客户端

Posted 2021-03-04 钱行慕

       ASP.NET Core SignalR javascript 客户端类库使得开发者可以在Javascript代码中调用服务端的 中心（hub） 代码。

安装SignalR 客户端包

       SignalR 客户端库是作为一个npm 包被传送的。如果你正在使用Visual Studio，在root 文件夹中，从包管理器控制台（PMC）中运行 npm install 命令。而对于Visual Studio Code，从整合终端来运行如下命令：

npm init -y
npm install @microsoft/signalr

      npm 将包内容安装到 node_modules@microsoftsignalrdistrowser 文件夹。在  wwwrootlib 文件夹下新建一个名为 signalr 的文件夹。将 signalr.js 文件拷贝到 wwwrootlibsignalr 文件夹。

使用SignalR Javascript 客户端

       在 <script>元素中引用SignalR Javascript客户端。

<script src="~/lib/signalr/signalr.js"></script>

连接到一个 中心（hub）

       以下代码创建并开启了一个连接。Hub的名称是大小写不敏感的。

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub")
    .configureLogging(signalR.LogLevel.Information)
    .build();

start();

/* this is here to show an alternative to start, with a then

跨越连接

        一般来说，浏览器加载来自于相同域的连接作为请求页。然而，也有一些情形我们需要连接到另一个域。

        为了阻止恶意站点从另一个站点读取敏感数据，默认情况下，cross-origin connections 会被禁掉。为了允许跨域请求，可以在Startup 类中启用它。

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using SignalRChat.Hubs;

namespace SignalRChat
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            services.Configure<CookiePolicyOptions>(options =>
            {
                options.CheckConsentNeeded = context => true;
                options.MinimumSameSitePolicy = SameSiteMode.None;
            });

            services.AddMvc();

            services.AddCors(options => options.AddPolicy("CorsPolicy", 
            builder => 
            {
                builder.AllowAnyMethod().AllowAnyHeader()
                       .WithOrigins("http://localhost:55830")
                       .AllowCredentials();
            }));

            services.AddSignalR();
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseBrowserLink();
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseCookiePolicy();
            app.UseCors("CorsPolicy");
            app.UseSignalR(routes => 
            {
                routes.MapHub<ChatHub>("/chathub");
            });
            app.UseMvc();            
        }
    }
}

从客户端调用 中心 方法

       Javascript 客户端通过HubConnection的  invoke  方法来调用 中心 定义的  public 方法。 invoke  方法接收两个参数：

• 中心 方法的名称。在如下的示例中，中心的方法名称是SendMessage。
• 定义在 中心 方法中的任意参数。在如下的示例中，参数名称是message。如下的代码示例使用了箭头函数标记，其在除IE之外的所以主流浏览器的当前版本中都会支持。

connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));

       注意：如果你正在以无服务模式使用Azure SignalR 服务，你将不能从客户端调用 中心 方法。更多信息，请参考SignalR Service documentation。

       invoke 方法返回一个Javascript Promise。当服务端的方法返回时，使用返回值（如果有）对Promise 进行解析。如果服务端的方法抛出了一个错误，Promise 就会用错误信息被拒绝。在Promise 本身使用 then 和 catch方法以处理这些情形（或者await 标记）。