can we Integrate Signal R service with a Node Js Application ?

ravi venkat 1 Reputation point
2022-03-23T09:36:54.957+00:00

HI all
We are hosting a Single page application using NodeJS ( angular ) with cosmos DB on a Webapp. We want to add a Realtime functionality to this application. Can we use a Azure Signal R service to achieve this kind of functionality ? I found in most of the documents it's supporting only .NET applications. Can it support angular based web applications ?

Azure SignalR Service
Azure SignalR Service
An Azure service that is used for adding real-time communications to web applications.
142 questions
Azure Cosmos DB
Azure Cosmos DB
An Azure NoSQL database service for app development.
1,632 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Grmacjon-MSFT 17,886 Reputation points
    2022-03-25T06:20:56.843+00:00

    Hi @ravi venkat

    Thanks for the question.

    Yes, you should be able to use Azure Signal R with Angular application. Based on this StackOverflow thread:

    "You can connect Azure SignalR Hub from Angular using connection string which can be get from appsettings.json by following the steps below:

    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");  
    });  
    

    "

    Another way to connect your Angular app with SignlaR is to use Azure Functions. To learn more about this option please read this blog post

    Hope that helps. Please let us know if you have further questions

    Thanks,
    Grace

    ------------------------------------------------------------------------------------------------------------------------------

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.