doc: 完善示例

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Tutorials/SocketApp.razor

@@ -1,14 +1,21 @@
 @page "/socket"
 
 <div>
-    <p>由于是示例演示，所以不提供选择 <code>IP 地址</code> 与 <code>端口</code> 功能，服务器也不提供公网链接防止被攻击。示例使用 <code>127.0.0.1</code> 地址进行通讯</p>
+    <p>由于是示例演示，不提供选择 <code>IP 地址</code> 与 <code>端口</code> 功能。点击 <b>连接</b> <b>断开</b> 测试功能</p>
 
     <div class="row forn-inline g-3">
         <div class="col-12 col-sm-6 align-content-center">
             <Light Color="@_connectColor" IsFlash="_flash"></Light>
         </div>
         <div class="col-12 col-sm-6">
-            <Button Text="连接 127.0.0.1:8000" OnClick="OnConnectAsync" IsDisabled="@_client.IsConnected"></Button>
+            <Button Text="连接" Icon="fa-solid fa-play"
+                    OnClick="OnConnectAsync" IsDisabled="@_client.IsConnected"></Button>
+            <Button Text="断开" Icon="fa-solid fa-stop"
+                    OnClick="OnCloseAsync" IsDisabled="@(!_client.IsConnected)"></Button>
+        </div>
+        <div class="col-12">
+            <Console Items="@_items" Height="500" HeaderText="接收数据（间隔 10 秒）"
+                     ShowAutoScroll="true" OnClear="@OnClear"></Console>
         </div>
     </div>
 </div>

src/BootstrapBlazor.Server/Components/Samples/Tutorials/SocketApp.razor.cs

@@ -7,7 +7,7 @@
 
 namespace BootstrapBlazor.Server.Components.Samples.Tutorials;
 
-public partial class SocketApp : ComponentBase
+public partial class SocketApp : ComponentBase, IDisposable
 {
     [Inject, NotNull]
     private ITcpSocketFactory? TcpSocketFactory { get; set; }
@@ -16,7 +16,9 @@ public partial class SocketApp : ComponentBase
 
     private bool _flash = false;
 
-    private ITcpSocketClient _client = default!;
+    private ITcpSocketClient _client = null!;
+
+    private List<ConsoleMessageItem> _items = [];
 
     /// <summary>
     /// <inheritdoc/>
@@ -27,17 +29,74 @@ protected override void OnInitialized()
 
         // 从服务中获取 Socket 实例
         _client = TcpSocketFactory.GetOrCreate("bb", key => new IPEndPoint(IPAddress.Loopback, 0));
-        _flash = _client.IsConnected;
-        _connectColor = _client.IsConnected ? Color.Success : Color.None;
+        _client.ReceivedCallBack += OnReceivedAsync;
+        ResetLight();
     }
 
     private async Task OnConnectAsync()
     {
         if (_client is { IsConnected: false })
         {
             await _client.ConnectAsync("127.0.0.1", 8800, CancellationToken.None);
-            _flash = _client.IsConnected;
-            _connectColor = _client.IsConnected ? Color.Success : Color.None;
+            ResetLight();
+        }
+    }
+
+    private async Task OnCloseAsync()
+    {
+        if (_client is { IsConnected: true })
+        {
+            await _client.CloseAsync();
+            ResetLight();
+        }
+    }
+
+    private void ResetLight()
+    {
+        _flash = _client.IsConnected;
+        _connectColor = _client.IsConnected ? Color.Success : Color.None;
+    }
+
+    private Task OnClear()
+    {
+        _items = [];
+        return Task.CompletedTask;
+    }
+
+    private async ValueTask OnReceivedAsync(ReadOnlyMemory<byte> data)
+    {
+        // 将数据显示为十六进制字符串
+        var payload = System.Text.Encoding.UTF8.GetString(data.Span);
+        _items.Add(new ConsoleMessageItem
+        {
+            Message = $"接收到来自站点的数据为 {payload}"
+        });
+
+        // 保持队列中最大数量为 50
+        if (_items.Count > 50)
+        {
+            _items.RemoveAt(0);
         }
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private void Dispose(bool disposing)
+    {
+        if (disposing)
+        {
+            if (_client is { IsConnected: true })
+            {
+                _client.ReceivedCallBack -= OnReceivedAsync;
+            }
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    public void Dispose()
+    {
+        Dispose(true);
+        GC.SuppressFinalize(this);
     }
 }