Blazor ServerでTimerを使った連続処理

System.Timers.Timer を使ってカウントアップし続けるサンプル

Timerのサンプルコードでタイマーで走らせるメソッドを分離したパターンのサンプルが見つからなかったのでこちらに投稿したいと思います。

1.コード側の記述

まずHTML側に表示するカウンター用変数とタイマークラスを用意します。

SamplePage.razor

@code {
    private int i = 0;
    private System.Timers.Timer? timer;
}

次にカウンター変数をインクリメントするメソッドを作ります。非同期処理なのでStateHasChanged()で再描画の通知が必要です。

SamplePage.razor

@code {
    //以下を追記
    
    private async void TimerElapsed(object? sender, System.Timers.ElapsedEventArgs e)
    {
        //直接UIに非同期で記述
        await InvokeAsync(() =>
        {
            i++;
            StateHasChanged(); //非同期なので再描画通知
        });
    }

}

ページが開いた瞬間からカウントアップするようにします。

SamplePage.razor

@code {
    //以下を追記
    
    //ページが開くときに発動するメソッド
    protected override void OnInitialized()
    {
        base.OnInitialized(); //基底クラスの初期化
        timer = new System.Timers.Timer(10); //10mSec毎に発動するタイマーを生成。
        timer.Elapsed += TimerElapsed; //タイマーにメソッド登録
        timer.Start();
    }
}

2.HTML側の記述

HTML側はカウンター変数iを記述しているだけです。

SamplePage.razor

@page "/samplepage"

<h3>SamplePage</h3>
<p>@i.ToString()</p>

以上でTimerを使ったシンプルなカウントアップサンプルができました。

3.ボタンを使ってカウンターを止めたり再起動したり＋α

ボタンをつけてカウンターを止めたり、終了時にインスタンス廃棄する処理も追加し、ソースを全て表示したものが以下となります。

SamplePage.razor

@page "/samplepage"

<h3>SamplePage</h3>
<p>@i.ToString()</p>

<button class="btn btn-light" @onclick = "Click">
    
    @if(timer != null)
    {
        @if (timer.Enabled)
        {
            <div>停止</div>
        }
        else
        {
            <div>作動</div>
        }
    }

</button>



@code {
    private int i = 0;
    private System.Timers.Timer? timer;
    private async void TimerElapsed(object? sender, System.Timers.ElapsedEventArgs e)
    {
        //直接UIに非同期で記述
        await InvokeAsync(() =>
        {
            i++;
            StateHasChanged(); //非同期なので再描画通知
        });
    }
    
    //ページが開くときに発動するメソッド
    protected override void OnInitialized()
    {
        base.OnInitialized(); //基底クラスの初期化
        timer = new System.Timers.Timer(10); //10mSec毎に発動するタイマーを生成。
        timer.Elapsed += TimerElapsed; //タイマーにメソッド登録
        timer.Start();
    }


    //タイマーつけたり止めたり
    private void Click()
    {
        if (timer.Enabled)
        {
            timer.Stop();
        }
        else
        {
            timer.Start();
        }
    }



    //ページ廃棄されたときにインスタンス廃棄
    public void Dispose()
    {
        timer?.Dispose();
    }
}

以上となります。お目汚し失礼しました。