是否可以知道用户何时因任何原因失去与服务器的连接：没有互联网连接、服务器关闭等等。
我知道这已经集成在Blazor服务器端，但我想知道是否有可能在BlazorClient端复制相同的行为。
有一种方法可以通过使用一段JS代码来检查用户是否有互联网连接：
window.navigator.onLine
这里讨论的更多内容：检测到Internet连接处于脱机状态？但使用这种方法，您应该能够知道用户离线时的大多数情况。
如何在代码中实现这一点？创建一个名为Connection.rawer的组件，然后放在那里：
@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");
}
}
然后创建一个JS文件Connection.JS，代码为：
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);
}
}
};
然后将此JS链接到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>
最后在MainLayout.rarzor中使用此组件，例如：
<Connection>
<Online>
<h1 style="color: green">Online</h1>
</Online>
<Offline>
<h1 style="color: red">Offline</h1>
</Offline>
</Connection>
由于这种方法，您可以在用户的连接不可用时通知用户。Src：https://www.patrickrobin.co.uk/articles/showing-connection-status-in-blazor-webassembly/
所以上面的代码处理了缺乏互联网连接的问题，但如果服务器坏了怎么办？然后尝试使用类似nuget:的httpClient拦截
Toolbelt.Blazor.HttpClientInterceptor
这种处理的示例在线程中：如何在Blazor web程序集中检查客户端连接状态