feat(INetworkMonitorService): add INetworkMonitorService service

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/NetworkMonitorIndicator.razor

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

src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorIndicator.razor.cs

@@ -13,7 +13,7 @@ namespace BootstrapBlazor.Components;
 /// <remarks>This component allows you to configure the text, placement, and trigger behavior of a tooltip that
 /// appears when interacting with the network monitor indicator. The tooltip can be customized to provide additional
 /// information to users.</remarks>
-public partial class NetworkMonitorIndicator
+public partial class NetworkMonitorIndicator : IDisposable
 {
     /// <summary>
     /// 获得/设置 Popover 弹窗标题 默认为 null
@@ -37,8 +37,10 @@ public partial class NetworkMonitorIndicator
     [Inject, NotNull]
     private IStringLocalizer<NetworkMonitorIndicator>? Localizer { get; set; }
 
+    [Inject, NotNull]
+    private INetworkMonitorService? NetworkMonitorService { get; set; }
+
     private NetworkMonitorState _state = new();
-    private readonly List<string> _indicators = [];
     private string _networkTypeString = "";
     private string _downlinkString = "";
     private string _rttString = "";
@@ -53,11 +55,11 @@ public partial class NetworkMonitorIndicator
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
-    protected override void OnInitialized()
+    protected override async Task OnInitializedAsync()
     {
-        base.OnInitialized();
+        await base.OnInitializedAsync();
 
-        _indicators.Add(Id);
+        await NetworkMonitorService.RegisterStateChangedCallback(this, OnNetworkStateChanged);
     }
 
     /// <summary>
@@ -69,15 +71,33 @@ protected override void OnParametersSet()
 
         Trigger ??= "hover focus";
         Title ??= Localizer["Title"];
+
         _networkTypeString = Localizer["NetworkType"];
         _downlinkString = Localizer["Downlink"];
         _rttString = Localizer["RTT"];
     }
 
-    private Task OnNetworkStateChanged(NetworkMonitorState state)
+    private async Task OnNetworkStateChanged(NetworkMonitorState state)
     {
         _state = state;
-        StateHasChanged();
-        return Task.CompletedTask;
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private void Dispose(bool disposing)
+    {
+        if (disposing)
+        {
+            NetworkMonitorService.UnregisterStateChangedCallback(this);
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <exception cref="NotImplementedException"></exception>
+    public void Dispose()
+    {
+        Dispose(true);
+        GC.SuppressFinalize(this);
     }
 }

src/BootstrapBlazor/Components/NetworkMonitor/NetworkMonitorState.cs

@@ -10,11 +10,6 @@ namespace BootstrapBlazor.Components;
 /// </summary>
 public class NetworkMonitorState
 {
-    /// <summary>
-    /// Gets or sets a value indicating whether the network is online
-    /// </summary>
-    public bool IsOnline { get; set; }
-
     /// <summary>
     /// Gets or sets the current network type
     /// </summary>

src/BootstrapBlazor/Extensions/BootstrapBlazorServiceCollectionExtensions.cs

@@ -93,6 +93,7 @@ public static IServiceCollection AddBootstrapBlazor(this IServiceCollection serv
         services.TryAddScoped<IMediaDevices, DefaultMediaDevices>();
         services.TryAddScoped<IVideoDevice, DefaultVideoDevice>();
         services.TryAddScoped<IAudioDevice, DefaultAudioDevice>();
+        services.TryAddScoped<INetworkMonitorService, DefaultNetowrkMonitorService>();
         services.AddScoped<TabItemTextOptions>();
         services.AddScoped<DialogService>();
         services.AddScoped<MaskService>();