perf: 更改为服务器端与客户端结合减少服务器压力

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/FooterCounter.razor

@@ -1,7 +1,9 @@
 @inject ICacheManager Cache
 @inject IConnectionService ConnectionService
+@inherits WebSiteModuleComponentBase
+@attribute [JSModuleAutoLoader("Components/FooterCounter.razor.js")]
 
-<div class="d-none d-sm-block ms-2" style="width: 110px;">Run @Runtime</div>
+<div id="@Id" class="d-none d-sm-block ms-2" style="width: 110px;">Run @Runtime</div>
 @if (_options.Enable)
 {
     <div class="footer-online ms-2">

src/BootstrapBlazor.Server/Components/Components/FooterCounter.razor.cs

@@ -10,11 +10,11 @@ namespace BootstrapBlazor.Server.Components.Components;
 /// <summary>
 /// FooterCounter 组件
 /// </summary>
-public partial class FooterCounter : IDisposable
+public partial class FooterCounter
 {
     private string? Runtime { get; set; }
 
-    private CancellationTokenSource _disposeTokenSource = new();
+    private readonly CancellationTokenSource _disposeTokenSource = new();
 
     private ConnectionHubOptions _options = default!;
 
@@ -30,7 +30,9 @@ protected override void OnInitialized()
         base.OnInitialized();
 
         _options = BootstrapBlazorOptions.Value.ConnectionHubOptions;
-        UpdateRuntime();
+
+        var ts = DateTimeOffset.Now - Cache.GetStartTime();
+        Runtime = ts.ToString("dd\\.hh\\:mm\\:ss");
     }
 
     /// <summary>
@@ -41,36 +43,44 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);
 
-        try
+        if (firstRender)
         {
-            await Task.Delay(1000, _disposeTokenSource.Token);
-            UpdateRuntime();
-            StateHasChanged();
+            try
+            {
+                while (_disposeTokenSource is { IsCancellationRequested: false })
+                {
+                    await Task.Delay(30000, _disposeTokenSource.Token);
+                    var ts = DateTimeOffset.Now - Cache.GetStartTime();
+                    await InvokeVoidAsync("updateFooterCounter", Id, ts.TotalSeconds);
+                }
+            }
+            catch { }
         }
-        catch { }
     }
 
-    private void UpdateRuntime()
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync()
     {
         var ts = DateTimeOffset.Now - Cache.GetStartTime();
-        Runtime = ts.ToString("dd\\.hh\\:mm\\:ss");
+        return InvokeVoidAsync("init", Id, ts.TotalSeconds);
     }
 
-    private void Dispose(bool disposing)
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="disposing"></param>
+    /// <returns></returns>
+    protected override async ValueTask DisposeAsync(bool disposing)
     {
+        await base.DisposeAsync(true);
+
         if (disposing)
         {
             _disposeTokenSource.Cancel();
             _disposeTokenSource.Dispose();
         }
     }
-
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    public void Dispose()
-    {
-        Dispose(true);
-        GC.SuppressFinalize(this);
-    }
 }

src/BootstrapBlazor.Server/Components/Components/FooterCounter.razor.js

@@ -0,0 +1,46 @@
+import Data from "../../_content/BootstrapBlazor/modules/data.js"
+
+export function init(id, totalSeconds) {
+    const el = document.getElementById(id);
+    if (el === null) {
+        return;
+    }
+
+    const tick = () => {
+        const counter = Data.get(id);
+
+        counter.totalSeconds = (counter.totalSeconds || 0) + 1;
+        const now = Math.round(counter.totalSeconds, 0);
+
+        const days = Math.floor(now / (24 * 3600));
+        const hours = Math.floor((now % (24 * 3600)) / 3600);
+        const minutes = Math.floor((now % 3600) / 60);
+        const seconds = now % 60;
+
+        const pad = num => num.toString().padStart(2, '0');
+        el.innerHTML = `Run ${pad(days)}.${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+    }
+
+    const handler = setInterval(tick, 1000);
+    Data.set(id, {
+        el,
+        handler,
+        totalSeconds
+    });
+}
+
+export function updateFooterCounter(id, totalSeconds) {
+    const counter = Data.get(id);
+    if (counter) {
+        counter.totalSeconds = totalSeconds;
+        console.log(`FooterCounter updated: ${id}, totalSeconds: ${totalSeconds}`);
+    }
+}
+
+export function dispose(id) {
+    const counter = Data.get(id);
+    if (counter) {
+        clearInterval(counter.handler);
+        Data.remove(id);
+    }
+}