Auto reconnect Blazor Serverside

Question

Blazor serverside (dotnet core 3.1)

I run into the problem that on customer side this is shown:

Could not reconnect to the server. Reload the page to restore functionality.

Each time I update the Codebase or Internet is broken or something like this.

Now the goal is that it should reload the page as soon as the server is back again (or in some interval).

Is there any possibility / github repo or something like this that could help me?

Thx!

Answer 1

<script>
    // Wait until a 'reload' button appears
    new MutationObserver((mutations, observer) => {
        if (document.querySelector('#components-reconnect-modal h5 a')) {
            // Now every 10 seconds, see if the server appears to be back, and if so, reload
            async function attemptReload() {
                await fetch(''); // Check the server really is back
                location.reload();
            }
            observer.disconnect();
            attemptReload();
            setInterval(attemptReload, 10000);
        }
    }).observe(document.body, { childList: true, subtree: true });
</script>

This will wait until the reload button appears and then will wait until the server is back up before actually reloading.

From https://github.com/dotnet/aspnetcore/issues/10325#issuecomment-537979717

Answer 2

One trick some people forget about is that you can actually "watch" your code base for changes, if you open your favorite terminal and run dotnet run watch debug in the same folder as your cproj file it should watch your changes so when you refresh your browser it should pick up any changes to your application, formore information read: https://docs.microsoft.com/en-us/aspnet/core/tutorials/dotnet-watch?view=aspnetcore-3.1

dotnet watch is a tool that runs a .NET Core CLI command when source files change. For example, a file change can trigger compilation, test execution, or deployment.

Hope this helps

Answer 3

You can try this code:

<script src="_framework/blazor.server.js"></script>

<script>
   Blazor.defaultReconnectionHandler._reconnectCallback = function(d) {
        document.location.reload(); 
   }
</script>