Handling updates for private pages

[aranvir]

This is a follow-up to the question posted here: #3751

fyi @falkoschindler

Description

When building a multi-page application with @ui.page(), it's difficult to synchronize server-pushed content between all connected clients. To my understanding, this happens because the content of a page is scoped to each client connection and cannot be (reliably) found by the auto-context. Even when using mark() and the ElementFilter() it remains hidden since the page elements are created individually per "client-page-context".

Workaround

I found a workaround to run updates within the scope of each connected client. The obvious downside is that this gets slower with each connected client.

def with_clients(path: str, fn: Callable):
    """Call a function within the scope of all clients connected to a certain page path.

    Args:
        path: Page path that shall serve the scope
        fn: Callable that shall be run within the page scope
    """
    for _client in client.Client.instances.values():
        if _client.page.path != path:
            continue
        with _client.content:
            fn()

Proposal

I propose to adapt and/or modify this approach to provide an out-of-the-box solution for applying server-side updates to private pages. The performance could be optimized by running the content of the for loop in parallel instead of sequentially.

Maybe there is also a more elegant solution to integrate this, e.g., within the ElementFilter to specify a "page scope". It already has the argument local_scope but it does not seem to help here.

Example

As example I provide a simple application with 2 pages, where one page has a clock that shall be updated by the server.

Failing

The background job runs, but no update is applied since no element with the corresponding marker can be found.

import asyncio
import time

from nicegui import ui, app, ElementFilter, client


LANDING_PAGE_ROUTE = "/"
LANDING_PAGE_TITLE = "Landing Page"
OTHER_PAGE_ROUTE = "/other"
OTHER_PAGE_TITLE = "Other Page"


@ui.page(LANDING_PAGE_ROUTE)
def landing_page():
    ui.link(OTHER_PAGE_TITLE, target=OTHER_PAGE_ROUTE)


@ui.page(OTHER_PAGE_ROUTE)
def make_page():
    ui.link(LANDING_PAGE_TITLE, target=LANDING_PAGE_ROUTE)
    ui.label("Current time")
    ui.label(time.strftime('%H:%M:%S')).mark('clock')


async def run_clock():
    """Background activity to update the label value every second."""
    def update_clock():
        for element in ElementFilter(kind=ui.label, marker='clock'):
            element.text = time.strftime('%H:%M:%S')

    while True:
        update_clock()
        await asyncio.sleep(1)


app.on_startup(run_clock)
ui.run(host="localhost")

Working with proposed solution

The update is applied to all connected tabs.

import asyncio
import time
from typing import Callable

from nicegui import ui, app, ElementFilter, client


LANDING_PAGE_ROUTE = "/"
LANDING_PAGE_TITLE = "Landing Page"
OTHER_PAGE_ROUTE = "/other"
OTHER_PAGE_TITLE = "Other Page"


def with_clients(path: str, fn: Callable):
    """Call a function within the scope of all clients connected to a certain page path.

    Args:
        path: Page path that shall serve the scope
        fn: Callable that shall be run within the page scope
    """
    for _client in client.Client.instances.values():
        if _client.page.path != path:
            continue
        with _client.content:
            fn()


@ui.page(LANDING_PAGE_ROUTE)
def landing_page():
    ui.link(OTHER_PAGE_TITLE, target=OTHER_PAGE_ROUTE)


@ui.page(OTHER_PAGE_ROUTE)
def make_page():
    ui.link(LANDING_PAGE_TITLE, target=LANDING_PAGE_ROUTE)
    ui.label("Current time")
    ui.label(time.strftime('%H:%M:%S')).mark('clock')


async def run_clock():
    """Background activity to update the label value every second."""
    def update_clock():
        def _update():
            for element in ElementFilter(kind=ui.label, marker='clock'):
                element.text = time.strftime('%H:%M:%S')

        # Run the update function for all clients connected to the corresponding ROUTE
        with_clients(OTHER_PAGE_ROUTE, _update)

    while True:
        update_clock()
        await asyncio.sleep(1)


app.on_startup(run_clock)
ui.run(host="localhost")

[falkoschindler]

Hi @aranvir, thanks for the suggestion!

Some first thoughts about it:

1. The for loop looks fast enough. All long-running tasks should be async anyway, so calling fn() multiple times shouldn't be a problem.
2. We should support async fn as well.
3. The user might want to find clients by other criteria than the path.
4. Maybe providing a client iterator would be more convenient and flexible, because one wouldn't need to pass in a function reference but can implement the update inline:

   for client in app.clients(path='/'):
       for element in ElementFilter(kind=ui.label, marker='clock'):
           element.text = time.strftime('%H:%M:%S')

[aranvir]

Started a PR here #3968