How do I make a Blazor page refresh a page instead of trying to reconnect upon connection loss?

Question

I've tried to search answers and found many, but those are working for older versions of .Net framework. I use 6.0.3.

My first approach was to find the function or procedure that gets called upon connection loss, tried to override the default reconnection function in the _Layout.cshtml file and found many solutions on various forums but those just simply don't work in my case.

Please don't hurt me, I'm not even a developer, but managed to implement all the features. This is the last needed thing.

Answer 1

Check out the Blazor Documentation on modifying the reconnection handler. It includes a handler for when the connection is dropped as well as for reconnection. You could probably modify their sample to call location.reload() instead of logging to the console. Just make sure your app won't get stuck in an endless loop for clients that have broken websockets support (if for some reason they can connect, but always drop the connection immediately).

Answer 2

This worked for my purposes. I typically develop using dotnet watch run for hot reloads and allow always for rude exits. I found it frustrating waiting for the slow reconnect attempts while the app would rebuild if there was a rude exit, and also don't think the user experience would be good for them to see that "reload" link.

I had to work backward through the compiled typescript to figure this out: TypeScript source. The ReconnectionDisplay (DefaultReconnectionDisplay source) gets initialized within the implementation; I could not find any clean way to gain access to replace the methods:

• show()
• hide()
• update(currentAttempt: number)
• failed()
• rejected()

This approach with infinite reload attempts keeps me from ending up at a "Site can't be reached" page. The rejected method seems to get called when the server comes back online and the state was lost on the server, as apposed to attempt timeouts. Reducing the retry interval seems to help to refresh the page sooner as well.

The reason I call defaultReconnectionHandler.onConnectionDown is that the _reconnectionDisplay gets constructed and assigned within that method, and then I replace the rejected call. I suppose reassigning the rejected call on every iteration is not the best way to do it, but it's a small enough footprint with infrequent iterations and will get garbage collected.

Don't forget to disable autostart or you'll get an error message that tells you Blazor is already running.

<script src="_framework/blazor.server.js" autostart="false"></script>
<script type="text/javascript">
    Blazor.start({
        reconnectionOptions: {
            maxRetries: Infinity,
            retryIntervalMilliseconds: 100
        },
        reconnectionHandler: {
            onConnectionDown: (options, error) => {
                Blazor.defaultReconnectionHandler.onConnectionDown(options, error);
                Blazor.defaultReconnectionHandler._reconnectionDisplay.rejected = function () {
                    window.location.reload();
                }
            }
        }
    });
</script>