ASP.NET Core SignalR :SignalR Javascript 客户端

Posted 钱行慕

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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@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 标记)。

以上是关于ASP.NET Core SignalR :SignalR Javascript 客户端的主要内容,如果未能解决你的问题,请参考以下文章

ASP.NET Core SignalR实时推送配置,业务层实时推送SignalR消息

ASP.NET Core的实时库: SignalR -- 预备知识

发现 ASP.NET Core SignalR

在 ASP.NET Core 中使用 SignalR

ASP.NET Core SignalR 下:SignalR Javascript 客户端

ASP.NET Core SignalR:集线器Hubs