Blazor Server App：网络流更新时自动更新组件的实现咨询

核心思路 #

无需使用SignalR，直接在Blazor组件内启动后台异步任务持续监听Moxa的TCP数据流，获取新数据后通过Blazor的UI更新机制自动刷新绑定的文本框。

具体实现步骤 #

1. 组件内定义变量与资源 #

在Index.razor中声明绑定值、TCP连接资源和取消令牌：

@page "/"
@implements IAsyncDisposable

<h3>Moxa实时数据</h3>
<p>当前数值：<input type="text" value="@CurrentData" readonly /></p>

@code {
    private string CurrentData = "初始化中...";
    private TcpClient? _tcpClient;
    private NetworkStream? _networkStream;
    private CancellationTokenSource? _cts;
    private readonly byte[] _buffer = new byte[1024]; // 根据Moxa数据包大小调整
}

2. 启动后台监听任务 #

在OnInitializedAsync中建立TCP连接并启动循环接收数据的异步任务：

protected override async Task OnInitializedAsync()
{
    _cts = new CancellationTokenSource();
    try
    {
        // 连接Moxa设备的IP和端口
        _tcpClient = new TcpClient();
        await _tcpClient.ConnectAsync("Moxa设备IP", 端口号, _cts.Token);
        _networkStream = _tcpClient.GetStream();

        // 启动后台持续接收任务
        _ = Task.Run(async () =>
        {
            while (!_cts.Token.IsCancellationRequested)
            {
                try
                {
                    // 读取数据流
                    int bytesRead = await _networkStream.ReadAsync(_buffer, 0, _buffer.Length, _cts.Token);
                    if (bytesRead > 0)
                    {
                        // 解析数据（根据Moxa实际协议调整，示例转为字符串）
                        string newData = Encoding.ASCII.GetString(_buffer, 0, bytesRead).Trim();
                        
                        // 更新绑定值并通知UI刷新
                        if (CurrentData != newData)
                        {
                            CurrentData = newData;
                            await InvokeAsync(StateHasChanged);
                        }
                    }
                }
                catch (OperationCanceledException)
                {
                    // 任务被取消，正常退出循环
                    break;
                }
                catch (Exception ex)
                {
                    // 处理异常，比如记录日志、尝试重连
                    CurrentData = $"异常：{ex.Message}";
                    await InvokeAsync(StateHasChanged);
                    // 可选：等待5秒后尝试重连
                    await Task.Delay(5000, _cts.Token);
                }
            }
        }, _cts.Token);
    }
    catch (Exception ex)
    {
        CurrentData = $"连接失败：{ex.Message}";
    }
}

3. 资源清理 #

实现IAsyncDisposable接口，在组件销毁时关闭连接、取消后台任务：

public async ValueTask DisposeAsync()
{
    _cts?.Cancel();
    _networkStream?.Close();
    _tcpClient?.Close();
    await _tcpClient?.DisposeAsync() ?? ValueTask.CompletedTask;
    _cts?.Dispose();
}

关键注意事项 #

• 数据解析：必须根据Moxa设备的实际通信协议调整数据解析逻辑（比如二进制转数值、拆分帧等）。
• 异常处理：添加重连逻辑避免单次连接失败导致功能失效，同时捕获异常防止后台任务崩溃。
• 线程安全：必须通过InvokeAsync(StateHasChanged)更新UI，因为后台任务不在Blazor的同步上下文内，直接调用StateHasChanged会引发线程安全问题。

关于SignalR失败的说明 #

SignalR适用于多客户端共享数据或客户端主动触发服务器操作的场景，你的需求是服务器端直接从设备拉取数据更新UI，不需要额外的SignalR层，直接在组件内处理更高效。如果之前尝试SignalR未成功，大概率是Hub推送时没有关联到正确的组件实例，或者客户端连接逻辑有误，但这个场景完全不需要SignalR。

内容的提问来源于stack exchange，提问作者Gagandeep Singh Bagga