How to connect multiple hubs in signalr and asp net core

Introduction

SignalR is a real-time communication library that allows bi-directional communication between the server and the client. It is widely used in ASP.NET applications to build real-time web applications, such as chat applications, stock tickers, and collaborative drawing tools. In this article, we will explore how to connect multiple hubs in SignalR and ASP.NET Core.

Creating Multiple Hubs

In SignalR, a hub is a high-level pipeline that allows the server and the client to call methods on each other. By default, an ASP.NET Core application can have only one hub. However, there are scenarios where you may need to have multiple hubs to handle different types of real-time communication.

To create multiple hubs in ASP.NET Core, you need to follow these steps:

// Step 1: Create a new hub class
public class ChatHub : Hub
{
    // Hub methods
}

// Step 2: Register the new hub in the Startup class
public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
    services.AddMvc();
}

// Step 3: Map the new hub in the Startup class
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseSignalR(routes =>
    {
        routes.MapHub("/chathub");
        routes.MapHub("/notificationhub");
        // Add more hubs if needed
    });

    app.UseMvc();
}

In the above code, we have created a new hub class called “ChatHub” and registered it in the ConfigureServices method of the Startup class. We have also mapped the hub in the Configure method of the Startup class using the MapHub method.

Connecting Multiple Hubs

Once you have created multiple hubs, you can connect to them from the client-side using the SignalR JavaScript client library. Here's an example of how to connect to multiple hubs:

// Connect to the ChatHub
var chatConnection = new signalR.HubConnectionBuilder()
    .withUrl("/chathub")
    .build();

// Connect to the NotificationHub
var notificationConnection = new signalR.HubConnectionBuilder()
    .withUrl("/notificationhub")
    .build();

// Start the connections
chatConnection.start().then(function () {
    console.log("Connected to ChatHub");
}).catch(function (err) {
    console.error(err.toString());
});

notificationConnection.start().then(function () {
    console.log("Connected to NotificationHub");
}).catch(function (err) {
    console.error(err.toString());
});

In the above code, we are creating two separate connections to the ChatHub and the NotificationHub using the withUrl method. We then start the connections using the start method.

Conclusion

In this article, we have learned how to connect multiple hubs in SignalR and ASP.NET Core. By creating multiple hub classes and mapping them in the Startup class, we can handle different types of real-time communication in our ASP.NET Core applications. We have also seen how to connect to multiple hubs from the client-side using the SignalR JavaScript client library.

By following these steps, you can easily connect multiple hubs in SignalR and ASP.NET Core and build powerful real-time web applications.