'Blazor client side verify internet connection status

Is it possible to know when the user loses the connection with the server for any kind of reason: no internet connection, server down, so on.

I know this is already integrated inside Blazor Server Side but I'm wondering if it is possible to replicate the same behavior inside Blazor Client Side.

blazor blazor-client-side

Solution 1:^[1]

There is way how to check if the user has internet connection by using a piece of JS code:

window.navigator.onLine

More discussed here: Detect the Internet connection is offline? But with this approach you should be able to know most cases when user is offline.

How to implement this into your code ? Create a component named Connection.razor and put there:

@inject IJSRuntime _jsRuntime;
@implements IAsyncDisposable

@if (IsOnline)
{
    @Online
}
else
{
    @Offline
}

@code {

    [Parameter]
    public RenderFragment Online { get; set; }

    [Parameter]
    public RenderFragment Offline { get; set; }

    public bool IsOnline { get; set; }

    [JSInvokable("Connection.StatusChanged")]
    public void OnConnectionStatusChanged(bool isOnline)
    {
        if (IsOnline != isOnline)
        {
            IsOnline = isOnline;
        }

        StateHasChanged();
    }

    protected override async Task OnInitializedAsync() {
        await base.OnInitializedAsync();

        await _jsRuntime.InvokeVoidAsync("Connection.Initialize", DotNetObjectReference.Create(this));
    }

    public async ValueTask DisposeAsync() {
        await _jsRuntime.InvokeVoidAsync("Connection.Dispose");
    }

}

Then create a JS file Connection.js with code:

let handler;

window.Connection = {
    Initialize: function (interop) {

        handler = function () {
            interop.invokeMethodAsync("Connection.StatusChanged", navigator.onLine);
        }

        window.addEventListener("online", handler);
        window.addEventListener("offline", handler);

        handler(navigator.onLine);
    },
    Dispose: function () {

        if (handler != null) {

            window.removeEventListener("online", handler);
            window.removeEventListener("offline", handler);
        }
    }
};

then link this JS inside your index.html:

<body>
    <div id="app" style="height: 100%;">Loading...</div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="js/Connection.js"></script>
</body>

and finally use this component for example inside your MainLayout.razor like:

<Connection>
    <Online>
        <h1 style="color: green">Online</h1>
    </Online>
    <Offline>
        <h1 style="color: red">Offline</h1>
    </Offline>
</Connection>

and thanks to this approach you are able to inform user if his connection is unavailable. Src: https://www.patrickrobin.co.uk/articles/showing-connection-status-in-blazor-webassembly/

So the code above handled the lack of internet connection, but what if the server is down ? Then try to use httpClient interception with something like nuget:

Toolbelt.Blazor.HttpClientInterceptor

example of such handling is in the thread: how to Check Client connection status in Blazor web assembly

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ssamko

'Blazor client side verify internet connection status

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]