ASP.NET Core SignalR （十）：SignalR Javascript 客户端

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\@microsoft\signalr\dist\browser 文件夹。在 wwwroot\lib 文件夹下新建一个名为 signalr 的文件夹。将 signalr.js 文件拷贝到 wwwroot\lib\signalr 文件夹。

使用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。

ASP.NET Core SignalR （十）：SignalR Javascript 客户端

猜你喜欢