Custom Blazor Startup Example with custom Retries/Interval and custom Reconnection Handler (not production code)

Custom Blazor Startup.html

    <script autostart="false" src="_framework/blazor.server.js"></script>
    <script>
        async function connectionDown(options) {
            console.log("Connection Down - you could do some UI here...");
            for (let i = 0; i < options.maxRetries; i++) {
                console.log("Waiting for reconnect attempt #"+(i+1)+" ...");
                await this.delay(options.retryIntervalMilliseconds);
                if (this.isDisposed) {
                    break;
                }

                try {
                    // reconnectCallback will asynchronously return:
                    // - true to mean success
                    // - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
                    // - exception to mean we didn't reach the server (this can be sync or async)
                    console.log("Starting Reconnect attempt #"+(i+1)+" ...");
                    const result = await window.Blazor.reconnect();
                    if (!result) {
                        // If the server responded and refused to reconnect, log it 
                        console.error("Server Rejected");
                    } else {
                        // Reconnected!
                        return;
                    }
                } catch (err) {
                    // We got an exception so will try again 
                    console.error(err);
                }
            }
            // all attempts failed - let's try a full reload
            // This could be a UI change instead or something more complicated
            location.reload();
        }

        function delay(durationMilliseconds) {
            return new Promise(resolve => setTimeout(resolve, durationMilliseconds));
        }

        function connectionUp(e) {
            // Reconnected
            console.log("Connection UP!");
            // if you have a UI to hide/change you can do that here.
        }

        window.Blazor.start({
            reconnectionOptions: {
                maxRetries: 30,
                retryIntervalMilliseconds: 500,
            },
            reconnectionHandler: {
                onConnectionDown: e => connectionDown(e),
                onConnectionUp: e => connectionUp(e)
            }
        });
    </script>

Blazor Startup

Not production ready code

Overview

Blazor has built in options for customising the startup process, but they are not really documented very well.

This is it as far as I can tell: https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.0#configure-the-signalr-client-for-blazor-server-apps

However there are more options, including the ability to set reconnection options.

In the code sample above, I am setting maxRetries and retryIntervalMilliseconds (lines 48/49) - which define how aggressively the client will try to reconnect in the event of a communication breakdown.

I also configure a custom reconnectionHandler (line 51) with a minimal implementation that will attempt to reconnect (without showing any UI) and if all attempts fail, it will simply reload the page.

This is not a very clever thing to do, but it works as a sample to demonstrate how you might go about customising the process.

Further Reading

https://github.com/aspnet/AspNetCore/tree/master/src/Components/Web.JS/src/Platform/Circuits

** PLEASE DO NOT USE THIS SAMPLE IN PRODUCTION **

Ticket to track - dotnet/aspnetcore#30344