BlazorServer how to unsubscribe/Dispose from JSR invokled Js-Events?

Viewed 48

Hi I have a 'user is inactiv -> logout' feature in my blazor server app. Via JSR I reset a Timer everytime the user presses a Mousebtn or a Key. If no 'ínput' is done the timer elapses and the logout methode is called (in this example the counterpage is navigated to).

I included this component in the Blazor shared/mainlayout.razor. But the logout methode is getting called even if the user is on a page that doesn't use the mainlayout anymore (e.g. logoutpage // no mainlayout).

How do I stop the once invoked JSR Event to call the logoutmethode?

What scope has the mainlayout.razor?

If I don't include the logoff component in the mainlayout and instead use it on a 'normal' page as a component it works a expected.

enter image description here

Code: MainLayout.razor:

    @inherits LayoutComponentBase
    
    <PageTitle>InActivLogOffComponent</PageTitle>
    
    <div class="page">
            <div class="sidebar">
                <NavMenu />
            </div>
            <main>
               
                <div class="sticky-md-top bg-white"><MyHeader></MyHeader></div>
    
                <article class="content px-4">
                    @Body
                </article>
            </main>
    </div>

TimerComponent:

    @using System.Timers
    @inject IJSRuntime _jsRuntime
    @inject NavigationManager _navigationManager
    
    <div class="border border-2 border-primary m-2 p-2">
    <h3>MyHeaderPage</h3>
    </div>
    
    @code {
    
        protected override void OnInitialized()
        {//the JSR-Event seems to reinstantiate this code ???
            Ini();
        }
    
        public System.Timers.Timer timerObj = new();
    
        public async void Ini()
        {//Set Timer
            timerObj = new System.Timers.Timer(3000);
            timerObj.Elapsed += EventHandlerTimerElapsed;
            timerObj.AutoReset = false;
            timerObj.Start();
            //observe onclick and onkeypress in JS function
            await _jsRuntime.InvokeVoidAsync("timeOutCall", DotNetObjectReference.Create(this));
        }
    
        [JSInvokable]
        public void TimerIntervalReset()
        {// Resetting the Timer
            timerObj.Stop();
            timerObj.Start();
        }
    
        public void EventHandlerTimerElapsed(Object? source, ElapsedEventArgs e) 
        {//if Timer is elapsed ... (no mouseclick or keypress happend for XX time)
    
            //PROBLEM NOTHING Stops the Event from happening again and again
            timerObj.Elapsed -= EventHandlerTimerElapsed;
            timerObj.Enabled = false;
            timerObj.Dispose();
            //^^
    
            _navigationManager.NavigateTo("/counter", true);
        }
    }

My Javascript:

function timeOutCall(dotnethelper) {
    //document.onmousemove = resetTimeDelay;
    document.onclick = resetTimeDelay;
    document.onkeypress = resetTimeDelay;

    function resetTimeDelay() {
        dotnethelper.invokeMethodAsync("TimerIntervalReset");
    }
}

0 Answers
Related