feat(INetworkMonitorService): add INetworkMonitorService service (#6407)

* doc: 移除 SDK 文本

* doc: 增加网络状态菜单

* doc: 增加网络状态源码映射

* doc: 增加网络状态示例

* doc: 增加指示器示例文档

* feat: 增加 INetworkMonitorService 服务

* refactor: 实现 INetworkMonitorService 逻辑

* doc: 更新示例

* refactor: 支持离线状态

* doc: 更新文档

* refactor: 更新细节

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor

@@ -60,7 +60,7 @@
     </div>
     <div class="footer-info">
         <div class="d-flex">
-            <div>SDK .NET @Version on @OS</div>
+            <div>.NET @Version on @OS</div>
             <div class="ms-1">BB @VersionService.Version</div>
             <FooterCounter></FooterCounter>
             <CacheCounter></CacheCounter>

src/BootstrapBlazor.Server/Components/Samples/NetworkMonitors.razor

@@ -0,0 +1,23 @@
+@page "/network-monitor"
+@inject IStringLocalizer<NetworkMonitors> Localizer
+
+<h3>@Localizer["NetworkMonitorTitle"]</h3>
+
+<h4>@((MarkupString)Localizer["NetworkMonitorDescription"].Value)</h4>
+
+<DemoBlock Title="@Localizer["NormalTitle"]"
+           Introduction="@Localizer["NormalIntro"]"
+           Name="Normal">
+    <section ignore>
+        <ul class="ul-demo">
+            <li><div class="demo-indicator demo-indicator-4g"></div> @Localizer["IndicatorLi1"]</li>
+            <li><div class="demo-indicator demo-indicator-3g"></div> @Localizer["IndicatorLi2"]</li>
+            <li><div class="demo-indicator demo-indicator-2g"></div> @Localizer["IndicatorLi3"]</li>
+            <li><div class="demo-indicator demo-indicator-offline"></div> @Localizer["IndicatorLi4"]</li>
+        </ul>
+    </section>
+    <NetworkMonitorIndicator></NetworkMonitorIndicator>
+    <section ignore>
+        <ConsoleLogger @ref="_logger"></ConsoleLogger>
+    </section>
+</DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/NetworkMonitors.razor.cs

@@ -0,0 +1,50 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// NetworkMonitor Sample code
+/// </summary>
+public partial class NetworkMonitors : IDisposable
+{
+    [Inject, NotNull]
+    private INetworkMonitorService? NetworkMonitorService { get; set; }
+
+    private ConsoleLogger _logger = null!;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+
+        await NetworkMonitorService.RegisterStateChangedCallback(this, OnNetworkStateChanged);
+    }
+
+    private Task OnNetworkStateChanged(NetworkMonitorState state)
+    {
+        _logger.Log($"Online: NetworkType: {state.NetworkType} Downlink: {state.Downlink} RTT: {state.RTT}");
+        return Task.CompletedTask;
+    }
+
+    private void Dispose(bool disposing)
+    {
+        if (disposing)
+        {
+            NetworkMonitorService.UnregisterStateChangedCallback(this);
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    public void Dispose()
+    {
+        Dispose(true);
+        GC.SuppressFinalize(this);
+    }
+}

src/BootstrapBlazor.Server/Components/Samples/NetworkMonitors.razor.css

@@ -0,0 +1,29 @@
+.ul-demo {
+    list-style: none;
+    padding-left: 0;
+}
+
+.demo-indicator {
+    cursor: pointer;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    display: inline-block;
+    margin-inline-end: .5rem;
+}
+
+.demo-indicator-4g {
+    background-color: var(--bs-primary);
+}
+
+.demo-indicator-3g {
+    background-color: var(--bs-warning);
+}
+
+.demo-indicator-2g {
+    background-color: var(--bs-danger);
+}
+
+.demo-indicator-offline {
+    background-color: var(--bs-secondary);
+}

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -1248,6 +1248,12 @@ void AddNotice(DemoMenuItem item)
                     Url = "fullscreen-button"
                 },
                 new()
+                {
+                    IsNew = true,
+                    Text = Localizer["NetworkMonitor"],
+                    Url = "network-monitor"
+                },
+                new()
                 {
                     Text = Localizer["Light"],
                     Url = "light"

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -4840,7 +4840,8 @@
     "SocketAutoReceive": "Auto Receive",
     "SocketManualReceive": "Manual Receive",
     "DataPackageAdapter": "DataPackageAdapter",
-    "SocketAutoConnect": "Reconnect"
+    "SocketAutoConnect": "Reconnect",
+    "NetworkMonitor": "Network Monitor"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -7119,5 +7120,15 @@
     "AutoReconnectsDescription": "Receive data through the data adapter and display",
     "NormalTitle": "Basic usage",
     "NormalIntro": "Enable automatic reconnection by setting <code>IsAutoReconnect</code>"
+  },
+  "BootstrapBlazor.Server.Components.Samples.NetworkMonitors": {
+    "NetworkMonitorTitle": "NetworkMonitor",
+    "NetworkMonitorDescription": "Use the browser native API <code>navigator.connection</code> to display the current network status in real time",
+    "NormalTitle": "Basic usage",
+    "NormalIntro": "Use the component <code>NetworkMonitorIndicator</code> to display indicator lights of different colors when the network status changes, and display the network status details when the mouse moves over it",
+    "IndicatorLi1": "Green: Very good network (4G)",
+    "IndicatorLi2": "Yellow: Average network (3G)",
+    "IndicatorLi3": "Red: Poor network (2G)",
+    "IndicatorLi4": "Gray: Offline"
   }
 }

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -4840,7 +4840,8 @@
     "SocketAutoReceive": "自动接收数据",
     "SocketManualReceive": "手动接收数据",
     "DataPackageAdapter": "数据处理器",
-    "SocketAutoConnect": "自动重连"
+    "SocketAutoConnect": "自动重连",
+    "NetworkMonitor": "网络状态 NetworkMonitor"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -7119,5 +7120,15 @@
     "AutoReconnectsDescription": "链路断开后自动重连示例",
     "NormalTitle": "基本用法",
     "NormalIntro": "通过设置 <code>IsAutoReconnect</code> 开启自动重连机制"
+  },
+  "BootstrapBlazor.Server.Components.Samples.NetworkMonitors": {
+    "NetworkMonitorTitle": "NetworkMonitor 网络状态",
+    "NetworkMonitorDescription": "使用浏览器原生 api <code>navigator.connection</code> 实时显示当前网络状态",
+    "NormalTitle": "基本用法",
+    "NormalIntro": "使用组件 <code>NetworkMonitorIndicator</code> 当网络状态变化时，显示不同颜色的指示灯，鼠标移动到上面时显示网络状态明细",
+    "IndicatorLi1": "绿色：网络非常好 (4G)",
+    "IndicatorLi2": "黄色：网络一般 (3G)",
+    "IndicatorLi3": "红色：网络差 (2G)",
+    "IndicatorLi4": "灰色：离线状态"
   }
 }

src/BootstrapBlazor.Server/docs.json

@@ -246,7 +246,8 @@
     "socket/manual-receive": "Sockets\\ManualReceives",
     "socket/auto-receive": "Sockets\\AutoReceives",
     "socket/adapter": "Sockets\\Adapters",
-    "socket/auto-connect": "Sockets\\AutoReconnects"
+    "socket/auto-connect": "Sockets\\AutoReconnects",
+    "network-monitor": "NetworkMonitors"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",

src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitor.cs

@@ -22,5 +22,3 @@
         </div>
     </Template>
 </Popover>
-
-<NetworkMonitor OnNetworkStateChanged="OnNetworkStateChanged" Indicators="@_indicators"></NetworkMonitor>