[Blazor] Telerik chart 자동 Refresh

버튼을 추가해서 Auto Refresh를 활성화시켰을 경우

일정 시간마다 DB를 refresh하여 Chart를 Refresh 하는 것이 이번 과제

 

 

버튼은 Telerik Component를 사용하여 어렵지 않게 할 수 있었다.

<div class="refresh_checkbox">
    <TelerikCheckBox @bind-Value="@CheckBoxOnlySelection"
                     Id="@CheckboxId"
                     Enabled="@CheckBoxEnabled"></TelerikCheckBox>
    <label for="@CheckboxId">Auto Refresh</label>
</div>

@code {
    public bool CheckBoxOnlySelection { get; set; } = false;
    public string CheckboxId { get; set; } = "CheckboxOnlySelection";
    public bool CheckBoxEnabled { get; set; } = true;
}

 

Auto Refresh 버튼을 활성화시켰을 경우 실행할 함수는 다음과 같다.

protected async Task AutoRefresh()
{
    await Task.Delay(10000); //10초 delay
    token.ThrowIfCancellationRequested(); //cancellationToken.Cancel()의 중단점
    OnInitialized(); //초기화 함수 실행 -> data refresh
    StateHasChanged();
    StockChartRef.Refresh(); //TelerikStockChart refresh
}

위의 코드는 지연시간이 지난 후 Task를 중단한다.

이렇게 하니 지연시간이 끝나기 전에 도 다른 Task를 실행시킬 경우

취소시킨 Task+추가한 Task 모두 취소되지 않고 실행되었다.

즉, Refresh 버튼을 활성화(15:48:01) -> 비활성화(15:48:03) -> 활성화(15:48:06)

이 세 단계의 프로세스가 지연시간인 10초 안에 일어난다면

1초부터 10초 간격+6초부터 10초 간격으로 refresh가 실행된다.

지연시간인 10초에 총 2번 refresh가 실행되는 것이다.

 

delay 중인 Task를 지연시간 종료 전에 강제 종료 하고자 한다면

아래와 같이 코드를 작성하면 된다.

await Task.Delay(10000, token);

 

AutoRefresh 함수는 Blazor 코드의 html 부분에서 호출했다.

<div class="refresh_checkbox">
    <TelerikCheckBox @bind-Value="@CheckBoxOnlySelection"
                     Id="@CheckboxId"
                     Enabled="@CheckBoxEnabled"></TelerikCheckBox>
    <label for="@CheckboxId">Auto Refresh</label>
</div>

@if (CheckBoxOnlySelection == true) //Refresh 버튼이 활성화됐을 경우
{
    tokenSource = new CancellationTokenSource(); //CancellationTokenSource 객체 생성
    token = tokenSource.Token; //CancellationToken 객체 생성

    refresh = AutoRefresh(); //AutoRefresh함수를 실행할 Task 생성
    Task.Run(async () => refresh, token); //Task 실행
}

@if (CheckBoxOnlySelection == false & tokenSource != null)
//Refresh 버튼이 활성화 되지 않았고 CancellationTokenSource 객체가 null이 아닐 경우
{
    tokenSource.Cancel(); //Task 실행 중단
}


@code{
    public bool CheckBoxOnlySelection { get; set; } = false;
    public string CheckboxId { get; set; } = "CheckboxOnlySelection";
    public bool CheckBoxEnabled { get; set; } = true;
    
	protected async Task AutoRefresh()
    {
        await Task.Delay(10000); //10초 delay
        token.ThrowIfCancellationRequested(); //cancellationToken.Cancel()의 중단점
        OnInitialized(); //초기화 함수 실행 -> data refresh
        StateHasChanged();
        StockChartRef.Refresh(); //TelerikStockChart refresh
    }
}