How to handle multiple clients looking at the same dynamic data.

[natankeddem]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui
import asyncio


class Control:
    monitors = []

    def __init__(self, client):
        self.client = client
        self.tests = {
            "A": ["test_a", "test_b", "test_c"],
            "B": ["test_c", "test_a", "test_b"],
            "C": ["test_c", "test_b", "test_a"],
        }
        self.status = None
        self.scroll = None

    def show(self):
        options = ui.select(
            options=["A", "B", "C"], value="A", label="Select test sequence"
        )
        ui.button("START", on_click=lambda _: self.start_tests(options.value))
        self.status = ui.label("Ready to run tests")
        self.scroll = ui.scroll_area().classes("h-96 border")

    async def start_tests(self, option):
        self.scroll.clear()
        for monitor in self.monitors:
            monitor.scroll.clear()
        for test in self.tests[option]:
            await self.run_test(test)

    def load_result(self, test):
        match test:
            case "test_a":
                ui.label("Running test A...")
            case "test_b":
                ui.label("Running test B...")
            case "test_c":
                ui.label("Running test C...")

    async def run_test(self, test):
        self.set_status(f"Running {test}...")
        with self.scroll:
            self.load_result(test)
        for monitor in self.monitors:
            with monitor.scroll:
                self.load_result(test)
        await asyncio.sleep(1)

    def set_status(self, text):
        self.status.set_text(text)
        for monitor in self.monitors:
            monitor.status.set_text(text)


class Monitor(Control):
    def __init__(self, client):
        super().__init__(client)
        self.monitors.append(self)

    def show(self):
        ui.label("Monitoring...")
        self.status = ui.label("Ready to run tests")
        self.scroll = ui.scroll_area().classes("h-96 border")


@ui.page("/")
def main_page(client):
    c = Control(client=client)
    c.show()


@ui.page("/monitor")
def monitor_page(client):
    m = Monitor(client=client)
    m.show()


if __name__ in {"__main__", "__mp_main__"}:
    ui.run(show=False, reload=False)

Description

I am trying to figure out the best way to emulate the old functionality of NiceGUI 2.x in which the ui state was shared between multiple clients/browsers. In the example I attached is a test interface which executes various tests in arbitrary/dynamic way and displays results after running. The result for each test may contain multiple NiceGUI elements in various arrangements, they can include tabbed interfaces or complex elements such as echarts. In my specific use case there is a main control client/browser and then multiple monitor clients that can view status/results but not control the testing.

The problem with the current implementation is that it only really works for test results that are static after the tests have completed running. In reality the test will want results shown with dynamic elements as the test runs, think xterm showing live status information from running terminal applications or an echart that is constantly changing as the test is executed. Right now my backend is only aware of a single element (the one which is shown in the control browser instance). I will need to make sure the backend not only instantiates the monitor elements but also updates all monitor elements as needed when the tests progress.

Is there an easier way to do this that I am not seeing?

NiceGUI Version

3.9.0

Python Version

Python 3.14.2

Browser

Chrome, Firefox

Operating System

macOS

Additional Context

No response

[evnchn]

Hello @natankeddem. I think #5737 may help. IMHO you're close but just missing Event and/or refreshable.

[falkoschindler]

Indeed! The new example lives here: https://github.com/zauberzeug/nicegui/blob/main/examples/device_control/

[natankeddem]

I'll check that out, thank you for the hints. I was thinking maybe I can use ElementFilter and mark? I can give all the complex elements unique tags quite easily with my current arrangement. Then I should be able address and bulk update all duplicate elements for each client easily.

[natankeddem]

I am not really sure if the Event path is within the scope of my current project structure. I will need to think more about how it might function without having to start from scratch, maybe on future projects I can try to design for this paradigm from the ground up.

I am going to proceed with utilizing ElementFilter as it seems to be working without too many changes to how my application currently runs. I created a method which will grab a list of elements which will be marked identically between all the clients, I then iterate over the elements with updates as needed.