Search code examples
asp.netasp.net-coreasp.net-core-signalr

SignalR Multiple Hub Connection .NET Core


I have 2 Hub classes,

SystemNotificationHub.cs

public class SystemNotificationHub : Hub { }

QuotationChatHub.cs

public class QuotationChatHub: Hub { }

SystemNotificationHub is defined in _Layout.cshtml so user is connected to hub continously, and when user enters to QuotationChat.cshtml page, I want also same user to connect the QuotationChatHub, so in a simple manner I'd like the user to connect multiple hubs at the same time.

I cannot let user to connect more than 1 hub at the same time. How can I achive this?

StartUp endPoint Configurations

endpoints.MapHub<SystemNotificationHub>("/systemNotificationHub");

endpoints.MapHub<QuotationHub>("/quotationHub");

quotationChat.js

$(function () {
    if (connection === null) {
        connection = new signalR.HubConnectionBuilder()
            .withUrl("/quotationHub")
            .build();

        connection.start().then(function () {
            document.getElementById('sendButton').onclick = function () {
                connection.invoke("BroadcastFromClient")
                    .catch(function (err) {
                        return console.error(err.toString());
                    });
            };
        });
    }
});

notification.js


$(function () {
    if (connection === null) {
        connection = new signalR.HubConnectionBuilder()
            .withUrl("/systemNotificationHub")
            .build();

        connection.on("Notify", function (response) {

        });

        connection.on("HubError", function (response) {
            alert(response.error);
        });

        connection.start().then(function () {
            connection.invoke("NotificationMethod")
                .catch(function (err) {
                    return console.error(err.toString());
                });
        });
    }
});

Solution

  • As far as I know, this issue is related with your if condition in your codes.

    You have checked connection is null or not before creating the connection builder. But all two js use the same connection model.

    To solve this issue, I suggest you could try to create a new connection for systemNotificationHub for example connection1 and then your code will work well.

    More details, you could refer to below codes:

    quotationChat.js not changed.

    notification.js:

    //Define a new connection1 as the new js object as connection
    $(function () {
        if (connection1 === null) {
            connection1 = new signalR.HubConnectionBuilder()
                .withUrl("/systemNotificationHub")
                .build();
    
            connection1.on("Notify", function (response) {
    
            });
    
            connection1.on("HubError", function (response) {
                alert(response.error);
            });
    
            connection1.start().then(function () {
                connection.invoke("NotificationMethod")
                    .catch(function (err) {
                        return console.error(err.toString());
                    });
            });
        }
    });