How can I use I timer in my Blazor server app, to perform an action periodically?

Question

Hello I have a Blazor server app where some PLC variables are read from a remote production machine. The code part that is connecting to the PLC and reading the datas is in a sourced service (PLCService.cs). The service is injected and called in a razor page. If I trigger the reading manualy with a button, all the variables are read correctly. So far no problem. But I want that the variables are read every second from the remote machine's PLC. Therefore I have programmed a timer in the codebehind page of my razor page (not in the service), but the timer is not working. (The values are note read even once) In the razor page there are also the variables that I read from the PLC, but for making it leaner I have just shown the counter value, that should count each second.

In my razor file:

@inject PLCService PLCService
<button @onclick="Read_CNC_Status">Read PLC Data</button>
<l>@counter_timer</l>  // Unfortunately the counter value is always "0"

In my razor.cs file:

using System.Timers;
public partial class Read_PLC_Data
{
    public int counter_timer=0; 
    System.Timers.Timer timer1 = new System.Timers.Timer();
    public async void Read_CNC_Status()
    {
        PLCService.Connect_PLC(); // Connection code is in a sourced service
        Initialise_Timer1();
    }

    public void Initialise_Timer1()
    {            
        timer1.Elapsed += new ElapsedEventHandler(OnTimedEvent1);
        timer1.Interval = 1000;
        timer1.Enabled = true;
        counter_timer = 0;
    }

    public void OnTimedEvent1(object source, ElapsedEventArgs e)
    {
        PLCService.Read_PLC_Data();            
        counter_CNC_status += 1;  // This counter is not counting !!!
        if(counter_timer >= 30)
        {
            counter_timer = 0;
            timer1.Enabled = false;

        }
        StateHasChanged();
    }

}

Answer 1

Try the periodic timer:

private readonly PeriodicTimer _periodicTimer = new(TimeSpan.FromSeconds(5));

public async void OnGet()
{
    while(await _periodicTimer.WaitForNextTickAsync())
    {
        await ConnectPlc();
    }
}

UPDATE 1

If you want to go with your approach you should use InvokeAsync(StateHasChanged) because Blazor would not recognize the state change and not refresh the UI

<h3>@_currentCount</h3>

@code {
    private int _currentCount;
    private System.Timers.Timer _timer;

   protected override void OnInitialized()
   {
       _timer = new();
       _timer.Interval = 1000;
       _timer.Elapsed += async (object? sender, ElapsedEventArgs e) =>
       {
           _currentCount++;               
           await InvokeAsync(StateHasChanged);
       };
       _timer.Enabled = true;
   }
}

Don't forget to invoke the StateHasChanged method

UPDATE 2

If you want to use the periodic timer that i initially suggest, you can use it this way:

First let's assume that you have a class that is responsible for PLC data and implements the INotifyPropertyChanged interface:

public class PlcData : INotifyPropertyChanged
{
    private readonly ILogger<PlcData> _logger;

    public event PropertyChangedEventHandler? PropertyChanged;

    private void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private int _counter;

    public int Counter
    {
        get { return _counter; }
        set 
        { 
            if (_counter != value)
            {
                _counter = value;
                NotifyPropertyChanged(nameof(Counter));
            }
        }
    }


    public PlcData(ILogger<PlcData> logger)
    {
        _logger = logger;
    }

    public async Task GetFromPlcAsync()
    {
        _logger.LogInformation("Get new info: {c}", ++Counter);
        await Task.CompletedTask;
    }
}

Then Create a background service

public class PlcService : BackgroundService
{
    private readonly PlcData _plc;
    private readonly PeriodicTimer _timer;

    public PlcService(PlcData plc)
    {
        _plc = plc;
        _timer = new(TimeSpan.FromSeconds(1));
    }

    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        while(await _timer.WaitForNextTickAsync(stoppingToken) 
            && !stoppingToken.IsCancellationRequested)
        {
            await _plc.GetFromPlcAsync();
        }
    }
}

In razor page your need to inject the PlcData

@inject PlcData plcData

<h3>@_currentCount</h3>

@code {
    private static int _currentCount;

    protected override void OnInitialized()
    {
        plcData.PropertyChanged += OnIncrement;
    }

    private async void OnIncrement(object? sender, PropertyChangedEventArgs e)
    {
        _currentCount = plcData.Counter;
        await InvokeAsync(() =>
        {
            StateHasChanged();
        });
    }
}

Also you need to add services to the container.

builder.Services.AddHostedService<PlcService>();
...
...
builder.Services.AddSingleton<PlcData>();

Here is a typical Program.cs from .net6 Blazor-Server And that's it!

UPDATE 3

Using System.Threading

@page "/"
@using System.Threading;

<h3>@_currentCount</h3>

@code {
    private int _currentCount;

   protected override void OnInitialized()
   {
       var timer = new Timer(new TimerCallback(_ =>
        {
            _currentCount++;
            InvokeAsync(() =>
            {
                StateHasChanged();
            });
        }), null, 1000, 1000);
   }
}

Answer 2

The best approach for me is to use QUARTZ.NET

Answer 3

I don't see where you are calling the Read_CNC_Status() method. If you don't call it, then nothing you wrote about the timer is ever executed. You can call it in the component's OnAfterRender function (or in the constructor of your partial class).

protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        Read_CNC_Status();
    }
    base.OnAfterRender(firstRender);
}

I ran the rest of the code and it works.

EDIT: It's not necessary, but I also recommend that you make sure the handler is not called again before the previous execution is finished (this could happen for example if Read_PLC_Data() is slow and takes more than the timer's Interval to complete). To do that, you can set the AutoReset property of your timer to false and manually restart the timer each time at the end of your handler, like this:

public async void Read_CNC_Status()
{
    PLCService.Connect_PLC(); // Connection code is in a sourced service
    Initialise_Timer1();
}

public void Initialise_Timer1()
{            
    timer1.Elapsed += new ElapsedEventHandler(OnTimedEvent1);
    timer1.Interval = 1000;
    timer1.AutoReset = false;
    counter_CNC_status = 0;
    timer1.Start();
}

public void OnTimedEvent1(object source, ElapsedEventArgs e)
{
          
    try
    {
        PLCService.Read_PLC_Data();      
        counter_CNC_status += 1;  // This counter is not counting !!!
    }
    finally
    {
        if(counter_CNC_status >= 30)
        {
            counter_CNC_status = 0;
            timer1.Enabled = false;
        }
        else
        {
            timer1.Start();
        }
    }
    StateHasChanged();
}