Is it possible to not share the state between multiple browser windows?

[qiuwei]

In the button example,

from nicegui import ui

def button_increment():
    global button_count
    button_count += 1
    button_result.set_text(f'pressed: {button_count}')

button_count = 0
ui.button('Button', on_click=button_increment)
button_result = ui.label('pressed: 0')

ui.run()

How can I have separate button counts for different multiple browser windows?

[rodja]

This is an interesting requirement. The short answer would be no. NiceGUI is build on JustPy, a framework which uses the python backend as frontend. So there is technically no state per browser tab. All state is kept synchronised between all clients.

But we have an idea on how to use the interaction event from one of the browser tabs to trigger an action which is only executed on the certain tab. It's quite tricky but the work had become more intense thanks to your request.

[qiuwei]

Thanks for the information about Justpy.
I have played a bit with it. It seems that not sharing the states between tabs is the default for Justpy.

import justpy as jp

def my_click(self, msg):
    self.count += 1
    self.text = f'{self.count}'

def event_demo():
    wp = jp.WebPage()
    d = jp.Div(text='Not clicked yet', a=wp, classes='w-48 text-xl m-2 p-1 bg-blue-500 text-white')
    d.count = 0
    d.on('click', my_click)
    return wp

jp.justpy(event_demo)

[rodja]

Thanks for your input @qiuwei. You are absolutely right. In your code each browser tab creates a new jp.WebPage through the builder function event_demo. NiceGUI only serves a single instance to all clients. We have to think a bit about this. Stay tuned.

[rodja]

The architecture of NiceGUI is build around the concept of shared pages. Otherwise you would need to mange the state of each client separately. As you did by attaching the counter to the div-tag (d.count = 0). We have the feeling that it will get too complicated to handle in more complex scenarios. Therefore we would like to stick to shared pages. But we just released a version 0.7.1 of NiceGUI which has a new feature called ui.open. With this you can create a button which generates a new page on click:

#!/usr/bin/env python3
from starlette.websockets import WebSocket
from uuid import uuid4
from nicegui import ui
from nicegui.elements.page import Page

class PrivatePage(Page):

    def __init__(self, socket: WebSocket):
        route = f'/{str(uuid4())}'
        super().__init__(route)
        self.count = 0
        with self:
            self.status = ui.label('0').style('font-size:4em')
            with ui.row():
                ui.button('increment', on_click=self.increment)
                ui.button('CLOSE', on_click=lambda e: ui.open('/', e.socket))
        ui.open(route, socket)

    def increment(self):
        self.count += 1
        self.status.set_text(self.count)

ui.button('open private page', on_click=lambda e: PrivatePage(e.socket))

ui.run()

As you can see every private page has its own state. Please let us know if this is sufficient to solve your problem.

[rodja]

I'll close the issue. @qiuwei feel free to contact us any time if you still have questions.

[me21]

I've come up with my own solution not requiring additional paths. I'll share it a little later. I didn't test it thoroughly though, but the tabs in one browser share the state while the tabs in different browsers are separate.

[falkoschindler]

Interesting! We're also thinking about how NiceGUI creates a common page instance for all clients and how we could (optionally) generate a new one for each client. But it's still just an idea.

[me21]

My solution:

# Creating a PrivatePage for some route will make page instances with different sessions independent.
class PrivatePage(ui.page):

    def __init__(self, route: str, setup_ui: Callable, *args, **kwargs):
        self.setup_ui, self.args, self.kwargs = setup_ui, args, kwargs
        if 'on_disconnect' in kwargs:
            del kwargs['on_disconnect']
        super().__init__(route, *args, **kwargs)
        self.individual_page_viewers: dict[str, int] = {}
        self.individual_pages: dict[str, ui.page] = {}

    async def on_disconnect(self, websocket: WebSocket):
        if 'on_disconnect' in self.kwargs:
            disconnect_handler = self.kwargs['on_disconnect']
            await disconnect_handler() if is_coroutine(disconnect_handler) else disconnect_handler()
        session_id = websocket.cookies['jp_token'].split('.')[0]
        self.individual_page_viewers[session_id] -= 1
        print(f'Viewer quit, session id {session_id}, total {self.individual_page_viewers[session_id]}')
        if self.individual_page_viewers[session_id] == 0:
            self.individual_pages.pop(session_id).remove_page()  # To reclaim used memory

    #TODO: override __enter__ and __exit__ to be able to use it in context manager like ordinary page?
    async def _route_function(self, request: Request):
        # we spawn additional page instance for each session id
        if request.session_id not in self.individual_pages:
            self.individual_pages[request.session_id] = ui.page(self.route,
                                                                *self.args,
                                                                on_disconnect=self.on_disconnect,
                                                                **self.kwargs)
            jp.Route.instances.pop(0)
            self.individual_page_viewers[request.session_id] = 0
            self.setup_ui(self.individual_pages[request.session_id])
        self.individual_page_viewers[request.session_id] += 1
        print(f'New viewer, session_id {request.session_id}, viewers {self.individual_page_viewers[request.session_id]}')
        return await self.individual_pages[request.session_id]._route_function(request)

I also changed on_disconnect function in page.py to call user supplied handler with websocket argument:

    async def on_disconnect(self, websocket=None) -> None:
        for disconnect_handler in ([self.disconnect_handler] if self.disconnect_handler else []) + disconnect_handlers:
            arg_count = len(inspect.signature(disconnect_handler).parameters)
            is_coro = is_coroutine(disconnect_handler)
            if arg_count == 1:
                await disconnect_handler(websocket) if is_coro else disconnect_handler(websocket)
            elif arg_count == 0:
                await disconnect_handler() if is_coro else disconnect_handler()
            else:
                raise ValueError(f'invalid number of arguments (0 or 1 allowed, got {arg_count})')
        await super().on_disconnect(websocket)

Usage:

def login(args):
    # you can access the page object as sender.page, etc.
    sender = args.sender
    socket = args.socket
    pass


def setup_login_ui(page: ui.page):
    with page:
        ui.input('User Name').classes('w-full')
        ui.input('Password').classes('w-full').props('type=password')
        ui.button('Log in', on_click=login)


login_page = PrivatePage('/login', setup_ui=setup_login_ui)

ui.run()

Currently it doesn't allow setting up page right after creation like with ordinary pages, it needs a callback which is invoked once per specific session id.
It makes different sessions independent from each other, but tabs in the same browser share the same session, thus still sharing the state. I think it's possible to make them independent too by comparing the websocket instances, not session ids. Or not, because in _route_function we don't have access to websocket.
I didn't test it thoroughly, beware of unknown bugs.

[falkoschindler]

Thanks, @me21! I looked it through and it seems to be a very reasonable approach. I'll probably try to bake it more into the original ui.page. If a regular page would accept a callable (setup_ui in your case), it could act as your PrivatePage automatically. Here is a discussion about this idea: #61

By the way: Providing an optional socket in page.on_disconnect seems very handy and consistent with the other callbacks. I added it to the main branch. 56ff679