Skip to content

Commit c466d8e

Browse files
ArgoZhangArgoZhang
committed
doc: 增加手动接收数据示例
1 parent f77ddb7 commit c466d8e

File tree

8 files changed

+178
-14
lines changed

8 files changed

+178
-14
lines changed

‎src/BootstrapBlazor.Server/Components/Samples/Sockets/Receives.razor‎ renamed to ‎src/BootstrapBlazor.Server/Components/Samples/Sockets/AutoReceives.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@page "/socket/receive"
2-
@inject IStringLocalizer<Receives> Localizer
1+
@page "/socket/auto-receive"
2+
@inject IStringLocalizer<AutoReceives> Localizer
33

44
<h3>@Localizer["ReceivesTitle"]</h3>
55
<h4>@Localizer["ReceivesDescription"]</h4>

‎src/BootstrapBlazor.Server/Components/Samples/Sockets/Receives.razor.cs‎ renamed to ‎src/BootstrapBlazor.Server/Components/Samples/Sockets/AutoReceives.razor.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ namespace BootstrapBlazor.Server.Components.Samples.Sockets;
1010
/// <summary>
1111
/// 接收电文示例
1212
/// </summary>
13-
public partial class Receives : IDisposable
13+
public partial class AutoReceives : IDisposable
1414
{
1515
[Inject, NotNull]
1616
private ITcpSocketFactory? TcpSocketFactory { get; set; }

‎src/BootstrapBlazor.Server/Components/Samples/Sockets/ManualReceives.razor‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@page "/socket/manual-receive"
2+
@inject IStringLocalizer<ManualReceives> Localizer
3+
4+
<h3>@Localizer["ReceivesTitle"]</h3>
5+
<h4>@Localizer["ReceivesDescription"]</h4>
6+
7+
<Notice></Notice>
8+
9+
<DemoBlock Title="@Localizer["NormalTitle"]"
10+
Introduction="@Localizer["NormalIntro"]"
11+
Name="Normal" ShowCode="false">
12+
<p>本例中连接一个模拟时间同步服务，每间隔 10s 自动发送服务器时间戳，连接后无需发送任何数据即可持续收到时间戳数据</p>
13+
<ul class="ul-demo">
14+
<li>点击 <b>连接</b> 按钮后通过 <code>ITcpSocketFactory</code> 服务实例创建的 <code>ITcpSocketClient</code> 对象连接到网站模拟 <code>TcpServer</code></li>
15+
<li>点击 <b>断开</b> 按钮调用 <code>CloseAsync</code> 方法断开 Socket 连接</li>
16+
</ul>
17+
<p>使用 <code>ReceivedCallBack</code> 委托获得接收到的数据，可通过 <code>+=</code> 方法支持多个客户端接收数据</p>
18+
<Pre>_client.ReceivedCallBack += OnReceivedAsync;</Pre>
19+
<p>特别注意页面需要继承 <code>IDisposable</code> 或者 <code>IAsyncDisposable</code> 接口，在 <code>Dispose</code> 或者 <code>DisposeAsync</code> 中移除委托</p>
20+
<Pre>private void Dispose(bool disposing)
21+
{
22+
if (disposing)
23+
{
24+
if (_client is { IsConnected: true })
25+
{
26+
_client.ReceivedCallBack -= OnReceivedAsync;
27+
}
28+
}
29+
}</Pre>
30+
31+
<div class="row form-inline g-3">
32+
<div class="col-12 col-sm-6">
33+
<Button Text="连接" Icon="fa-solid fa-play"
34+
OnClick="OnConnectAsync" IsDisabled="@_client.IsConnected"></Button>
35+
<Button Text="断开" Icon="fa-solid fa-stop" class="ms-2"
36+
OnClick="OnCloseAsync" IsDisabled="@(!_client.IsConnected)"></Button>
37+
</div>
38+
<div class="col-12">
39+
<Console Items="@_items" Height="496" HeaderText="接收数据（间隔 10 秒）"
40+
ShowAutoScroll="true" OnClear="@OnClear"></Console>
41+
</div>
42+
</div>
43+
</DemoBlock>
44+

‎src/BootstrapBlazor.Server/Components/Samples/Sockets/ManualReceives.razor.cs‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
5+
6+
using System.Net;
7+
8+
namespace BootstrapBlazor.Server.Components.Samples.Sockets;
9+
10+
/// <summary>
11+
/// 接收电文示例
12+
/// </summary>
13+
public partial class ManualReceives : IDisposable
14+
{
15+
[Inject, NotNull]
16+
private ITcpSocketFactory? TcpSocketFactory { get; set; }
17+
18+
private ITcpSocketClient _client = null!;
19+
20+
private List<ConsoleMessageItem> _items = [];
21+
22+
private readonly IPEndPoint _serverEndPoint = new(IPAddress.Loopback, 8800);
23+
24+
/// <summary>
25+
/// <inheritdoc/>
26+
/// </summary>
27+
protected override void OnInitialized()
28+
{
29+
base.OnInitialized();
30+
31+
// 从服务中获取 Socket 实例
32+
_client = TcpSocketFactory.GetOrCreate("demo-receive", options =>
33+
{
34+
options.LocalEndPoint = new IPEndPoint(IPAddress.Loopback, 0);
35+
});
36+
_client.ReceivedCallBack += OnReceivedAsync;
37+
}
38+
39+
private async Task OnConnectAsync()
40+
{
41+
if (_client is { IsConnected: false })
42+
{
43+
await _client.ConnectAsync(_serverEndPoint, CancellationToken.None);
44+
}
45+
}
46+
47+
private async Task OnCloseAsync()
48+
{
49+
if (_client is { IsConnected: true })
50+
{
51+
await _client.CloseAsync();
52+
}
53+
}
54+
55+
private Task OnClear()
56+
{
57+
_items = [];
58+
return Task.CompletedTask;
59+
}
60+
61+
private async ValueTask OnReceivedAsync(ReadOnlyMemory<byte> data)
62+
{
63+
// 将数据显示为十六进制字符串
64+
var payload = System.Text.Encoding.UTF8.GetString(data.Span);
65+
_items.Add(new ConsoleMessageItem
66+
{
67+
Message = $"接收到来自站点的数据为 {payload}"
68+
});
69+
70+
// 保持队列中最大数量为 50
71+
if (_items.Count > 50)
72+
{
73+
_items.RemoveAt(0);
74+
}
75+
await InvokeAsync(StateHasChanged);
76+
}
77+
78+
private void Dispose(bool disposing)
79+
{
80+
if (disposing)
81+
{
82+
if (_client is { IsConnected: true })
83+
{
84+
_client.ReceivedCallBack -= OnReceivedAsync;
85+
}
86+
}
87+
}
88+
89+
/// <summary>
90+
/// <inheritdoc/>
91+
/// </summary>
92+
public void Dispose()
93+
{
94+
Dispose(true);
95+
GC.SuppressFinalize(this);
96+
}
97+
}

‎src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -210,13 +210,19 @@ void AddSocket(DemoMenuItem item)
210210
new()
211211
{
212212
IsNew = true,
213-
Text = Localizer["SocketReceive"],
214-
Url = "socket/receive"
213+
Text = Localizer["SocketManualReceive"],
214+
Url = "socket/manual-receive"
215215
},
216216
new()
217217
{
218218
IsNew = true,
219-
Text = Localizer["SocketDataAdapter"],
219+
Text = Localizer["SocketAutoReceive"],
220+
Url = "socket/auto-receive"
221+
},
222+
new()
223+
{
224+
IsNew = true,
225+
Text = Localizer["DataPackageAdapter"],
220226
Url = "socket/adapter"
221227
}
222228
};

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4824,7 +4824,9 @@
48244824
"TcpSocketFactory": "ITcpSocketFactory",
48254825
"OfficeViewer": "Office Viewer",
48264826
"SocketComponents": "ITcpSocketFactory",
4827-
"SocketReceive": "Receive"
4827+
"SocketAutoReceive": "Auto Receive",
4828+
"SocketManualReceive": "Manual Receive",
4829+
"DataPackageAdapter": "DataPackageAdapter"
48284830
},
48294831
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
48304832
"TablesHeaderTitle": "Header grouping function",
@@ -7080,9 +7082,15 @@
70807082
"OfficeViewerNormalIntro": "Set the document URL for preview by configuring the <code>Url</code> value",
70817083
"OfficeViewerToastSuccessfulContent": "Office document loaded successfully"
70827084
},
7083-
"BootstrapBlazor.Server.Components.Samples.Sockets.Receives": {
7085+
"BootstrapBlazor.Server.Components.Samples.Sockets.ManualReceives": {
7086+
"ReceivesTitle": "Manual Receive",
7087+
"ReceivesDescription": "Receive data through call ReceiveAsync and display it",
7088+
"NormalTitle": "Basic usage",
7089+
"NormalIntro": "After connecting, the timestamp data sent by the server is automatically received through the <code>ReceiveAsync</code> callback method"
7090+
},
7091+
"BootstrapBlazor.Server.Components.Samples.Sockets.AutoReceives": {
70847092
"ReceivesTitle": "Socket Receive",
7085-
"ReceivesDescription": "Receive data through Socket and display it",
7093+
"ReceivesDescription": "Receive data through ReceivedCallBack and display it",
70867094
"NormalTitle": "Basic usage",
70877095
"NormalIntro": "After connecting, the timestamp data sent by the server is automatically received through the <code>ReceivedCallBack</code> callback method"
70887096
},

‎src/BootstrapBlazor.Server/Locales/zh-CN.json‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4824,7 +4824,9 @@
48244824
"TcpSocketFactory": "套接字服务 ITcpSocketFactory",
48254825
"OfficeViewer": "Office 文档预览组件",
48264826
"SocketComponents": "Socket 服务",
4827-
"SocketReceive": "接收数据"
4827+
"SocketAutoReceive": "自动接收数据",
4828+
"SocketManualReceive": "手动接收数据",
4829+
"DataPackageAdapter": "数据处理器"
48284830
},
48294831
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
48304832
"TablesHeaderTitle": "表头分组功能",
@@ -7080,9 +7082,15 @@
70807082
"OfficeViewerNormalIntro": "通过设置 <code>Url</code> 值设置预览文档地址",
70817083
"OfficeViewerToastSuccessfulContent": "Office 文档加载成功"
70827084
},
7083-
"BootstrapBlazor.Server.Components.Samples.Sockets.Receives": {
7084-
"ReceivesTitle": "Socket 接收示例",
7085-
"ReceivesDescription": "通过 Socket 接收数据并且显示",
7085+
"BootstrapBlazor.Server.Components.Samples.Sockets.ManualReceives": {
7086+
"ReceivesTitle": "手动接收示例",
7087+
"ReceivesDescription": "通过调用 ReceiveAsync 接收数据并且显示",
7088+
"NormalTitle": "基本用法",
7089+
"NormalIntro": "连接后通过 <code>ReceiveAsync</code> 回调方法自动接收服务端发送来的时间戳数据"
7090+
},
7091+
"BootstrapBlazor.Server.Components.Samples.Sockets.AutoReceives": {
7092+
"ReceivesTitle": "自动接收示例",
7093+
"ReceivesDescription": "通过 ReceiveCallback 接收数据并且显示",
70867094
"NormalTitle": "基本用法",
70877095
"NormalIntro": "连接后通过 <code>ReceivedCallBack</code> 回调方法自动接收服务端发送来的时间戳数据"
70887096
},

‎src/BootstrapBlazor.Server/docs.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,8 @@
243243
"vditor": "Vditors",
244244
"socket-factory": "SocketFactories",
245245
"office-viewer": "OfficeViewers",
246-
"socket/receive": "Sockets\\Receives",
246+
"socket/manual-receive": "Sockets\\ManualReceives",
247+
"socket/auto-receive": "Sockets\\AutoReceives",
247248
"socket/adapter": "Sockets\\Adapters"
248249
},
249250
"video": {

0 commit comments

Comments
 (0)