Blazor client side verify internet connection status

Question

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.

I don't think you can replicate the same behavior because Blazor Server Apps are WebSocket-based while WebAssembly Blazor Apps are HTTP-based . You may try to imitate some behavior of the server-side app in the client side app, but certainly you cannot replicate the behaviors unique to SignalR in WebAssembly apps... — enet, Mar 25 '20 at 01:30
I don't try but may be you can implement this behavior by opening a [SignalR](https://learn.microsoft.com/en-us/aspnet/core/signalr/dotnet-client?view=aspnetcore-3.1&tabs=visual-studio) connection. And check for connection closed. — agua from mars, Mar 25 '20 at 07:24
I know that I can't replicate the same behavior of Blazor server side but to be honest I need a something easier than it. I want to create a service that check if the connection is still open or not. Just to let user knows that something wrong happens. I will try with signalR — Leonardo Lurci, Mar 25 '20 at 07:57
No, don't try with SignalR. This is something entirely different. The connection you're taking about MUST BE, and I repeat, MUST BE an HTTP connection, perhaps the internet connection is lost, say because terrorists destroyed the internet cables in the sea, perhaps your server was stolen, was down, no electricity, and millions other causes, none of which can be dealt by you. The SignalR CircuitHandler relates to the life cycle methods of the circuit connection. — enet, Mar 25 '20 at 13:03

score 1 · Answer 1 · answered Apr 19 '22 at 07:38

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

Blazor client side verify internet connection status

1 Answers1