如何在Blazor Server中每2秒自动更新UI组件？

步骤1：修改UI组件，移除鼠标触发事件 #

<div class="card">
    <div class="card-header" style="text-align:center;">Gate</div>
    <div class="card-body">
        <input @bind-value="@BinancePrice" />
    </div>
</div>

步骤2：添加定时任务与生命周期管理 #

在组件类中添加定时器相关字段，实现组件初始化和销毁逻辑，避免内存泄漏：

using System.Threading;
using System.Threading.Tasks;

private PeriodicTimer? _priceUpdateTimer;
private CancellationTokenSource? _cts;
private readonly HttpClient _httpClient;

// 构造函数注入HttpClient（复用实例而非每次创建）
public YourComponentName(HttpClient httpClient)
{
    _httpClient = httpClient;
    // 一次性初始化HttpClient配置
    _httpClient.BaseAddress = new Uri("https://testnet.binance.vision");
    _httpClient.Timeout = new TimeSpan(0, 0, 5);
    _httpClient.DefaultRequestHeaders.Clear();
    _httpClient.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/x-www-form-urlencoded"));
    _httpClient.DefaultRequestHeaders.Add("X-MBX-APIKEY", Environment.GetEnvironmentVariable("APIKEY"));
    _httpClient.DefaultRequestHeaders.Add("SecretKey", Environment.GetEnvironmentVariable("SECRETKEY"));
}

protected override async Task OnInitializedAsync()
{
    _cts = new CancellationTokenSource();
    // 创建每2秒触发一次的异步定时器
    _priceUpdateTimer = new PeriodicTimer(TimeSpan.FromSeconds(2));
    
    // 循环等待定时器触发，直到组件销毁
    while (await _priceUpdateTimer.WaitForNextTickAsync(_cts.Token))
    {
        await PriceCheck();
        // 手动通知Blazor更新UI（自动绑定未生效时补充调用）
        StateHasChanged();
    }
}

// 实现IDisposable接口，清理定时器与取消令牌
public void Dispose()
{
    _cts?.Cancel();
    _cts?.Dispose();
    _priceUpdateTimer?.Dispose();
}

步骤3：优化PriceCheck方法（复用HttpClient） #

移除方法内重复创建HttpClient的逻辑，使用注入的实例：

private async Task PriceCheck()
{
    #region BinanceAPI
    try
    {
        var symbol = "BTCBUSD";
        var market = new Market(_httpClient);
        var result = await market.CurrentAveragePrice(symbol);
        BinancePrice? binancePrice = JsonConvert.DeserializeObject<BinancePrice>(result);
        Lista["Binance"] = binancePrice!.Price.ToString();
        BinancePrice = binancePrice!.Price.ToString();
    }
    catch (BinanceClientException binanceException)
    {
        Console.WriteLine(binanceException.InnerException?.Message ?? binanceException.Message);
    }
    #endregion
}

关键说明 #

• PeriodicTimer：.NET 6+提供的异步定时器，适配异步任务场景，避免传统Timer的线程池调度问题。
• 资源清理：通过CancellationTokenSource控制定时器停止，结合IDisposable接口确保组件销毁时释放资源，防止内存泄漏。
• HttpClient复用：注入HttpClient实例而非每次创建，遵循.NET性能最佳实践，减少TCP连接开销。
• StateHasChanged()：当异步操作未触发Blazor自动状态检测时，手动调用该方法通知框架重渲染UI。

内容的提问来源于stack exchange，提问作者Software Architect