Is there any way to connect Azure SignalR Hub directly from Angular 6 ?

CodePudding user response：

You can use below steps to connect Azure SignalR Hub from Angular using connection string which can be get from appsettings.json

Azure SignalR SDK allows the ease of use API just to change a couple of APIs and ready to use Azure SignalR service. To use this service, we have to AddAzureSignalR in configure service method and pass the Azure connection string which is copied from the Azure portal. Passing the same using configuration file (appsettings.json).

// This method gets called by the runtime. Use this method to add services to the container.

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

    // In production, the Angular files will be served from this directory

    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/dist";
    });
    services.AddSignalR().AddAzureSignalR(Configuration["Azure:SignalR:ConnectionString"]);

}

After adding Azure SignalR service, we need to use the Azure SignalR route pipeline to map the hub which is done in the configure method. Map the hub with URL to work correctly.

// Azure SignalR service

app.UseAzureSignalR(routes =>
{
    routes.MapHub<ChatHub>("/chat");
});

Refer here