Blazor Serverでポーリングによる定周期処理を行う方法

Blazor Server(.NET 8/Interactive Server)のページやコンポーネントで、タイマーではなくサーバーサイドの非同期なポーリング処理を使った定期的な画面更新を行うサンプル。

サンプルソースコード(C#)

Blazor SeverのサンプルのCounter.razorをカスタマイズしたものとなります。

@page "/counter"
@rendermode InteractiveServer
@implements IAsyncDisposable

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private Task? _pollingTask;
    private CancellationTokenSource? _pollingCancellation;

    private void IncrementCount()
    {
        currentCount++;
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        // 非同期処理タスク初期化
        _pollingCancellation = new CancellationTokenSource();
        _pollingTask = PollingTaskProc(_pollingCancellation.Token);
    }

    // 定周期処理
    private async Task PollingTaskProc(CancellationToken cancellationToken)
    {
        while (!cancellationToken.IsCancellationRequested)
        {
            // UI更新処理
            await InvokeAsync(() =>
            {
                currentCount++;
                StateHasChanged();
            });

            // インターバル(1秒間隔)
            try
            {
                await Task.Delay(1000, cancellationToken);
            }
            catch (TaskCanceledException) { }
        }
    }

    public async ValueTask DisposeAsync()
    {
        // タスクリソースクリーンアップ
        if (_pollingCancellation != null)
        {
            _pollingCancellation.Cancel();
            _pollingCancellation.Dispose();
        }
        if (_pollingTask != null)
        {
            await _pollingTask;
            _pollingTask.Dispose();
        }
    }
}

動作イメージ

1秒サイクルでカウンタがインクリメントされるのが分かります。

以上です。