SignalR is stuck in reconnecting when first connection attempt failed

I use ASP.Net Webapi as backend and Angular as frontend.

In order to establish a signalR-connection, I do the following in my angular component:

connection: signalR.HubConnection | undefined;

connect(): void {
this.connection = new signalR.HubConnectionBuilder()
.configureLogging(signalR.LogLevel.Information)

.withUrl(
myUrl
)
.build();

this.connection
.start()
.then(() => {
console.log('connected');
})
.catch((err) => {
console.warn(err);
});
}


Which works fine, when the backend is already running.

I also added some functions to reconnect, when the backend shuts down and gets up again:

this.connection.onclose(() => {
this.attemptToReconnectEvery5Seconds();
});


This also works. So, the following scenario works just fine:

1. Backend is up.
2. Angular is up.
3. Angular establishes signalR-connection.
4. Backend shuts down.
5. Angular loses connection, attempts to reconnect every 5 seconds.
6. Backend is up again.
7. Angular reconnects.

However, the following scenario does not work:

1. Backend is down.
2. Angular is up.
3. Angular attempts to reconnect every 5 seconds.
4. Backend is up.
5. Angular is stuck in state "Connecting".

When I refresh the page, everything works fine again.

What I tried so far

I tried to clear my connection variable. Before calling my connect()-method again, I did this:

this.connection.stop();
this.connection = undefined;


Didn't change anything.

Then I added a button that triggers the connect()-method. When I click the button, after the backend is up again, I get a 200-Response for "http://localhost:4200/api/myHub/negotiate?negotiateVersion=1".



But it seems that the connection is stuck in start(), because neither of the two logs are shown:

this.connection
.start()
.then(() => {
console.log('connected'); <--- never shows up
})
.catch((err) => {
console.warn(err); <--- never shows up
});


I don't understand why angular is able to reconnect, but not when the very first attempt failed. It's almost as if Angular remembers that the first attempt failed and every further attempt gets stuck, even when creating a new connection.

Any ideas on how to debug further?

Continue reading...