Page unload event doesn't stop timers

[flintcreek]

Question

I'm using a ui.timer to await a javascript call once per second. When the user navigates away from the page, the timer continues to raise the timer event up to two more times before stopping. This causes an exception, since the javascript is no longer available. Is there a best-practice to destroy timers when a page is unloaded? I guess I could do a timer.delete() in response to an .on('unload') event. Is there a better way?

[falkoschindler]

Hi @flintcreek,

Timers stop automatically when a client (a browser tab) disconnects. But this only happens after a few seconds when a re-connection isn't possible anymore.
If you need to know the exact moment when a user leaves the page, the "unload" event seems to be a good choice.

@rodja Maybe NiceGUI pages should always send an "unload" event so that the client's "disconnect" event can trigger, timers are stopped etc. 🤔

[flintcreek]

Hi Falko, Thanks for the insight! Where would I set the handler for the unload event? Not on the timer itself, I assume, since it’s a Window event? Another thought—is there a way to explicitly ask the server if the connection is valid? If so, would it be too time expensive to call every second? I am currently just catching and discarding the exception when my timer event fails, but that feels dangerous. By the way—I am thoroughly impressed with NiceGUI. I’ve been coding for 40 years in various languages and platforms and just last year learned Python. Tried several Python GUI solutions and finally landed on NiceGUI. Thank you to you and your team for putting it out into the open source world and faithfully supporting it for the community. I’m currently porting several of my applications to Python and NiceGUI, so I’ll probably have many more questions.

…

-Matt From: Falko Schindler ***@***.***> Date: Saturday, January 18, 2025 at 4:34 PM To: zauberzeug/nicegui ***@***.***> Cc: info flintcreekapps.com ***@***.***>, Mention ***@***.***> Subject: Re: [zauberzeug/nicegui] Page unload event doesn't stop timers (Discussion #4241) Hi @flintcreek<https://github.com/flintcreek>, Timers stop automatically when a client (a browser tab) disconnects. But this only happens after a few seconds when a re-connection isn't possible anymore. If you need to know the exact moment when a user leaves the page, the "unload" event seems to be a good choice. @rodja<https://github.com/rodja> Maybe NiceGUI pages should always send an "unload" event so that the client's "disconnect" event can trigger, timers are stopped etc. 🤔 — Reply to this email directly, view it on GitHub<#4241 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ARO5CWJOJCZJTJJHF2LPHVT2LLJILAVCNFSM6AAAAABVOAIS3SVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCOBXG44TONQ>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[falkoschindler]

Thanks for the warm words, @flintcreek! 😊

Where would I set the handler for the unload event?

It looks like we can add some custom JavaScript to register the window's "beforeunload" event and forward it to the server:

@ui.page('/')
def page():
    ui.add_head_html('''
        <script>
        window.addEventListener('beforeunload', (e) => emitEvent('close'));
        </script>
    ''')
    t = ui.timer(0.5, lambda: print(time.time()))
    ui.on('close', t.cancel)

is there a way to explicitly ask the server if the connection is valid?

It certainly depends on you definition of "valid". But I'm not aware of a way to get the immediate information that a client has left the page.

[flintcreek]

Thanks, that works great! I am also experimenting with using the same approach with the document.visibilitychange event, which seems to work nicely to activate/deactivate the timer when switching tabs.