Невозможно отправить данные, если соединение не находится в состоянии «Подключено». - Несколько хабов в SignalR

Question

Я пытаюсь справиться с SignalR, для этого я пытаюсь расширить функциональность простого учебного пособия по чату, которое Microsoft предоставляет в их документации.

Я сейчас пытаюсь добавить второй концентратор, который позволит пользователю отправлять целые числа и получать значение, умноженное на 10. Сам концентратор почти идентичен обычному ChatHub, за исключением дополнительного шага, который проверяет вход является числом и выполняет умножение.

ChatHub

public class ChatHub : Hub
    {
        public async Task SendMessage(string group,string user, string message)
        {
            await Clients.Group(group).SendAsync("ReceiveMessage", user, message);
        }

        public async Task AddToGroup(string groupName)
        {
            await Groups.AddToGroupAsync(Context.ConnectionId, groupName);

            await Clients.Group(groupName).SendAsync("Send", $"{Context.ConnectionId} has joined the group {groupName}.");
        }
    }

CalcHub

public class CalcHub : Hub
    {
        public async Task SendMessage(string group, string user, string message)
        {
            var value = MultiplyByTen(message);

            await Clients.Group(group).SendAsync("ReceiveMessage", user, value);
        }

        public async Task AddToGroup(string groupName)
        {
            await Groups.AddToGroupAsync(Context.ConnectionId, groupName);

            await Clients.Group(groupName).SendAsync("Send", $"{Context.ConnectionId} has joined the group {groupName}.");
        }

        public string MultiplyByTen(string input)
        {
            bool isANumber = Int32.TryParse(input, out int value);

            if (isANumber)
            {
                return (value * 10).ToString();
            }

            return "Not a number";
        }
    }

У меня настроен Javascript для моего интерфейса, который прекрасно работает, когда я пытаюсь подключиться к ChatHub и отправлять сообщения, однако, когда я пытаюсь использовать соединение с CalcHub, я получаю сообщение об ошибке Cannot send data if the connection is not in the 'Connected' State.

Вот как устанавливаются два соединения.

var calcConnection = new signalR.HubConnectionBuilder().withUrl("https://localhost:44309/calcHub").build();
var chatConnection = new signalR.HubConnectionBuilder().withUrl("https://localhost:44308/chatHub").build();
var activeConnection;

setConnection();

$("#hubSelector").on("change",
    function(data) {
        setConnection();
    });

У меня есть простой элемент select, который будет менять соединение в зависимости от его значения. SetConnection - метод, который управляет этим, который используется в DOM, готовом установить начальное соединение.

Оба концентратора также зарегистрированы в моем классе запуска.

            app.UseSignalR(routes =>
            {
                routes.MapHub<ChatHub>("/chatHub");
                routes.MapHub<CalcHub>("/calcHub");
            });

Если перейти к двум адресам концентраторов https://localhost:44309/calcHub и https://localhost:44309/chatHub, я также могу видеть, что они являются действительными адресами, когда я получаю сообщение Connection ID required.

Почему мой calcHub не работает?

Site.js

// Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
// for details on configuring this project to bundle and minify static web assets.

// Write your JavaScript code.

$(function() {
    var calcConnection = new signalR.HubConnectionBuilder().withUrl("https://localhost:44309/calcHub").build();
    var chatConnection = new signalR.HubConnectionBuilder().withUrl("https://localhost:44308/chatHub").build();
    var activeConnection;

    //setConnection();

    //$("#hubSelector").on("change",
    //    function(data) {
    //        setConnection();
    //    });




    activeConnection.on("ReceiveMessage", function (user, message) {
        var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        var encodedMsg = user + " says " + msg;
        var li = document.createElement("li");
        li.textContent = encodedMsg;
        document.getElementById("messagesList").appendChild(li);
    });

    activeConnection.start().catch(function (err) {
        return console.error(err.toString());
    });



    $("#addgroup").on("click", function () {
        var group = document.getElementById("group").value;
        activeConnection.invoke("AddToGroup", group).catch(function (err) {
            return console.error(err.toString());
        });
        $("#group-list").append("<p>" + group + "</p>");
        event.preventDefault();
    });

    $("#sendButton").on("click", function () {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        var group = document.getElementById("group").value;
        activeConnection.invoke("SendMessage", group, user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });

    function setConnection() {
        var selectValue = $("#hubSelector").val();

        if (selectValue === "chat") {
            $("#activeHub").html("<span>Active Hub: Chat</span>");
            activeConnection = chatConnection;
        }

        if (selectValue === "calc") {
            $("#activeHub").html("<span>Active Hub: Calc</span>");
            activeConnection = calcConnection;
        }

        console.log(activeConnection);
    }
});