doc: 增加接收数据示例文档

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Sockets/Notice.razor

@@ -0,0 +1,3 @@
+<Tips>
+    <p><code>ITcpSocketFactory</code> 服务仅在 <code>Server</code> 模式下可用</p>
+</Tips>

src/BootstrapBlazor.Server/Components/Samples/Sockets/Receives.razor

@@ -0,0 +1,44 @@
+@page "/socket/receive"
+@inject IStringLocalizer<Receives> Localizer
+
+<h3>@Localizer["ReceivesTitle"]</h3>
+<h4>@Localizer["ReceivesDescription"]</h4>
+
+<Notice></Notice>
+
+<DemoBlock Title="@Localizer["NormalTitle"]"
+           Introduction="@Localizer["NormalIntro"]"
+           Name="Normal" ShowCode="false">
+    <p>本例中连接一个模拟时间同步服务，每间隔 10s 自动发送服务器时间戳，连接后无需发送任何数据即可持续收到时间戳数据</p>
+    <ul class="ul-demo">
+        <li>点击 <b>连接</b> 按钮后通过 <code>ITcpSocketFactory</code> 服务实例创建的 <code>ITcpSocketClient</code> 对象连接到网站模拟 <code>TcpServer</code></li>
+        <li>点击 <b>断开</b> 按钮调用 <code>CloseAsync</code> 方法断开 Socket 连接</li>
+    </ul>
+    <p>使用 <code>ReceivedCallBack</code> 委托获得接收到的数据，可通过 <code>+=</code> 方法支持多个客户端接收数据</p>
+    <Pre>_client.ReceivedCallBack += OnReceivedAsync;</Pre>
+    <p>特别注意页面需要继承 <code>IDisposable</code> 或者 <code>IAsyncDisposable</code> 接口，在 <code>Dispose</code> 或者 <code>DisposeAsync</code> 中移除委托</p>
+    <Pre>private void Dispose(bool disposing)
+{
+    if (disposing)
+    {
+        if (_client is { IsConnected: true })
+        {
+            _client.ReceivedCallBack -= OnReceivedAsync;
+        }
+    }
+}</Pre>
+
+    <div class="row form-inline g-3">
+        <div class="col-12 col-sm-6">
+            <Button Text="连接" Icon="fa-solid fa-play"
+                    OnClick="OnConnectAsync" IsDisabled="@_client.IsConnected"></Button>
+            <Button Text="断开" Icon="fa-solid fa-stop" class="ms-2"
+                    OnClick="OnCloseAsync" IsDisabled="@(!_client.IsConnected)"></Button>
+        </div>
+        <div class="col-12">
+            <Console Items="@_items" Height="496" HeaderText="接收数据（间隔 10 秒）"
+                     ShowAutoScroll="true" OnClear="@OnClear"></Console>
+        </div>
+    </div>
+</DemoBlock>
+

src/BootstrapBlazor.Server/Components/Samples/Tutorials/SocketApp.razor.cs renamed to src/BootstrapBlazor.Server/Components/Samples/Sockets/Receives.razor.cs

@@ -5,9 +5,12 @@
 
 using System.Net;
 
-namespace BootstrapBlazor.Server.Components.Samples.Tutorials;
+namespace BootstrapBlazor.Server.Components.Samples.Sockets;
 
-public partial class SocketApp : ComponentBase, IDisposable
+/// <summary>
+/// 
+/// </summary>
+public partial class Receives : ComponentBase, IDisposable
 {
     [Inject, NotNull]
     private ITcpSocketFactory? TcpSocketFactory { get; set; }

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

@@ -91,6 +91,13 @@ public static List<MenuItem> GenerateMenus(this IStringLocalizer<NavMenu> Locali
         };
         AddSpeech(item);
 
+        item = new DemoMenuItem()
+        {
+            Text = Localizer["SocketComponents"],
+            Icon = "fa-solid fa-square-binary text-danger"
+        };
+        AddSocket(item);
+
         item = new DemoMenuItem()
         {
             Text = Localizer["Services"],
@@ -205,6 +212,19 @@ void AddSpeech(DemoMenuItem item)
             AddBadge(item, count: 5);
         }
 
+        void AddSocket(DemoMenuItem item)
+        {
+            item.Items = new List<DemoMenuItem>
+            {
+                new()
+                {
+                    Text = Localizer["SocketReceive"],
+                    Url = "socket/receive"
+                }
+            };
+            AddBadge(item, count: 1);
+        }
+
         void AddQuickStar(DemoMenuItem item)
         {
             item.Items = new List<DemoMenuItem>

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

@@ -4953,7 +4953,9 @@
     "DropUpload": "DropUpload",
     "Vditor": "Vditor Markdown",
     "TcpSocketFactory": "ITcpSocketFactory",
-    "OfficeViewer": "Office Viewer"
+    "OfficeViewer": "Office Viewer",
+    "SocketComponents": "ITcpSocketFactory",
+    "SocketReceive": "Receive"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -4953,7 +4953,9 @@
     "DropUpload": "拖动上传组件 DropUpload",
     "Vditor": "富文本框 Vditor Markdown",
     "TcpSocketFactory": "套接字服务 ITcpSocketFactory",
-    "OfficeViewer": "Office 文档预览组件"
+    "OfficeViewer": "Office 文档预览组件",
+    "SocketComponents": "Socket 服务",
+    "SocketReceive": "接收数据"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",

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

@@ -242,7 +242,8 @@
     "meet": "Meets",
     "vditor": "Vditors",
     "socket-factory": "SocketFactories",
-    "office-viewer": "OfficeViewers"
+    "office-viewer": "OfficeViewers",
+    "socket/receive": "Sockets\\Receives"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",