Connection with SignalR getting timeout error

Question

I have my SignalR service, and trying to connect it with a simple application of .Net Core. When the browser call to https://imubitsignalr.service.signalr.net:5001/client/negotiate?hub=usercount I'm getting the error of ERR_CONNECTION_TIMED_OUT.

What I'm missing?

The program: index.cshtml

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        function bindConnectionMessage(connection) {
            var messageCallback = function (message) {
                console.log('message' + message);
                if (!message) return;
                var userCountSpan = document.getElementById('users');
                userCountSpan.innerText = message;
            };
            connection.on("updateCount", messageCallback);
            connection.onclose(onConnectionError);
        }
        function onConnected(connection) {
            console.log('connection started');
        }
        function onConnectionError(error) {
            if (error && error.message) {
                console.error(error.message);
            }
        }
        var connection = new signalR.HubConnectionBuilder().withUrl('/chat').build();
        bindConnectionMessage(connection);
        connection.start()
            .then(function () {
                onConnected(connection);
            })
            .catch(function (error) {
                console.error(error.message);
            });
    });
</script>

In startup.cs I set:

services.AddSignalR(hubOptions => {
    hubOptions.EnableDetailedErrors = true;
    hubOptions.KeepAliveInterval = TimeSpan.FromSeconds(3);
}).AddAzureSignalR();

hub code:

   public class UserCount : Hub
    {
        private static int Count;

        public override Task OnConnectedAsync()
        {
            Count++;
            base.OnConnectedAsync();
            this.Clients.All.SendAsync("updateCount", Count);
            return Task.CompletedTask;
        }

        public override Task OnDisconnectedAsync(Exception exception)
        {
            Count--;
            base.OnDisconnectedAsync(exception);
            this.Clients.All.SendAsync("updateCount", Count);
            return Task.CompletedTask;
        }
    }

mapping the hub:

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

Answer 1

Make sure you configure your WebApp like this example:

public void Configure(IApplicationBuilder app, HostConfiguration hostConfiguration, ILogger<Startup> logger)
{
    base.Configure(app, hostConfiguration, logger);

    app.UseWebSockets();

    app.UseCors(CorsPolicy);

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

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy(CorsPolicy, builder => builder.WithOrigins("https://localhost:4200")
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials()
            .SetIsOriginAllowed((host) => true));
    });
            
    services.AddSignalR().AddAzureSignalR(azureOptions =>
    {
        azureOptions.ConnectionString = "connectionSringHere";
    });
}