feat(WebClientService): make client info id consistent with webclient id (#4385)

* refactor: 更改 IRootComponentGenerator 接口方法

* refactor: 更新示例

* Revert "refactor: 更改 IRootComponentGenerator 接口方法"

This reverts commit e9d8e6a.

* doc: 更新注释

* refactor: 增加 GetClientId 方法

* doc: 更新示例

* test: 更新单元测试

* refactor: 更新脚本

* refactor: 撤销新增方法

* doc: 更新示例

* test: 移除单元测试

* refactor: 精简代码

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Pages/Online.razor

@@ -5,5 +5,5 @@
 <h4>@Localizer["SubTitle"]：@ConnectionService.Connections.Count</h4>
 
 <section class="mt-3">
-    <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext" IsBordered="true" IsStriped="true"></Table>
+    <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext" IsBordered="true" IsStriped="true" SetRowClassFormatter="SetRowClassFormatter"></Table>
 </section>

src/BootstrapBlazor.Server/Components/Pages/Online.razor.cs

@@ -15,11 +15,16 @@ public partial class Online : IDisposable
     [NotNull]
     private IConnectionService? ConnectionService { get; set; }
 
+    [Inject]
+    [NotNull]
+    private WebClientService? WebClientService { get; set; }
+
     private DynamicObjectContext? DataTableDynamicContext { get; set; }
 
     private readonly DataTable _table = new();
 
     private CancellationTokenSource? _cancellationTokenSource = null;
+    private string? _clientId;
 
     /// <summary>
     /// <inheritdoc/>
@@ -29,7 +34,6 @@ protected override void OnInitialized()
         base.OnInitialized();
 
         CreateTable();
-        BuildContext();
     }
 
     /// <summary>
@@ -44,8 +48,9 @@ protected override void OnAfterRender(bool firstRender)
         {
             Task.Run(async () =>
             {
-                await Task.Delay(500);
-                _cancellationTokenSource = new();
+                var client = await WebClientService.GetClientInfo();
+                _clientId = client.Id;
+                _cancellationTokenSource ??= new();
                 while (_cancellationTokenSource is { IsCancellationRequested: false })
                 {
                     try
@@ -62,6 +67,7 @@ protected override void OnAfterRender(bool firstRender)
 
     private void CreateTable()
     {
+        _table.Columns.Add("Id", typeof(string));
         _table.Columns.Add("ConnectionTime", typeof(DateTimeOffset));
         _table.Columns.Add("LastBeatTime", typeof(DateTimeOffset));
         _table.Columns.Add("Dur", typeof(TimeSpan));
@@ -81,6 +87,7 @@ private void BuildContext()
         foreach (var item in ConnectionService.Connections)
         {
             _table.Rows.Add(
+                item.Id,
                 item.ConnectionTime,
                 item.LastBeatTime,
                 item.LastBeatTime - item.ConnectionTime,
@@ -100,7 +107,11 @@ private void BuildContext()
         DataTableDynamicContext = new DataTableDynamicContext(_table, (context, col) =>
         {
             col.Text = Localizer[col.GetFieldName()];
-            if (col.GetFieldName() == "ConnectionTime")
+            if (col.GetFieldName() == "Id")
+            {
+                col.Ignore = true;
+            }
+            else if (col.GetFieldName() == "ConnectionTime")
             {
                 col.FormatString = "yyyy/MM/dd HH:mm:ss";
                 col.Width = 118;
@@ -150,6 +161,12 @@ private static string FormatIp(object v)
         return ret;
     }
 
+    private string? SetRowClassFormatter(DynamicObject context)
+    {
+        var id = context.GetValue("id")?.ToString();
+        return _clientId == id ? "active" : null;
+    }
+
     private void Dispose(bool disposing)
     {
         if (disposing)

src/BootstrapBlazor/Services/WebClientService.cs

@@ -111,7 +111,7 @@ public async ValueTask DisposeAsync()
 public class ClientInfo
 {
     /// <summary>
-    /// 获得/设置 操作日志主键ID
+    /// 获得/设置 链接 Id
     /// </summary>
     public string? Id { get; set; }
 

src/BootstrapBlazor/wwwroot/modules/client.js

@@ -23,7 +23,7 @@ export async function getClientInfo(url) {
     });
     if (result) {
         data.ip = result.Ip;
-        data.id = result.Id;
     }
+    data.id = localStorage.getItem('bb_hub_connection_id') ?? result.Id;
     return data;
 }