Problem with popup a dialog using an external TCP signal

[Nineko]

Question

Hi everyone, I’m a beginner in NiceGUI and web development.
I’ve encountered an issue.
I have a requirement to send a message from another Python file to the GUI process using sockets. The message needs the user to make a selection (Y/N).
I have successfully implemented the message transmission part, but I still can’t get the dialog to pop up.
code like this :

import asyncio
import json
from nicegui import app, ui

dialog = ui.dialog()

async def handle_client(reader: asyncio.StreamReader, writer: asyncio.StreamWriter):
    try:
        while True:
            data = await reader.read(1024)
            if not data:
                break
            command_data = json.loads(data.decode())
            print(f"[INFO] Received data: {command_data}")
            command = command_data.get("command")
            if command == "show_dialog":
                text = command_data.get("content")
                response = await show_dialog(text)
                writer.write(json.dumps({"response": response}).encode())
                await writer.drain()
            else:
                writer.write(json.dumps({"error": "Unknown command"}).encode())
                await writer.drain()
    except Exception as e:
        print(f"[ERROR] {e}")
    finally:
        writer.close()
        await writer.wait_closed()

async def start_tcp_server():
    server = await asyncio.start_server(handle_client, '127.0.0.1', 65432)
    async with server:
        print("[INFO] TCP Server started on 127.0.0.1:65432")
        await server.serve_forever()

async def show_dialog(text: str) -> str:
    print(f"[INFO] Showing dialog with text: {text}")
    dialog_label.text = text
    dialog.open()
    response = await dialog
    return response

with dialog:
    dialog_label = ui.label()
    with ui.row():
        ui.button('YES', on_click=lambda: dialog.submit('yes'))
        ui.button('NO', on_click=lambda: dialog.submit('no'))

app.on_startup(start_tcp_server)

@ui.page('/')
async def main_page():
    ui.label("TCP Socket Integrated with NiceGUI").classes("text-2xl")

ui.run()

When I run the program and send a message using another program, I can see these in the terminal :

[INFO] TCP Server started on 127.0.0.1:65432
[INFO] Received data: {'command': 'show_dialog', 'content': 'This will stop the current task. Are you sure you want to continue?'}
[INFO] Showing dialog with text: This will stop the current task. Are you sure you want to continue?

But the dialog not pop up
I’ve been trying for a long time but still can’t get it to work. I hope someone can offer some assistance.
thx everyone.

[SOLVES]
thx falkoschindler

I move dialog into main

@ui.page('/')
async def main_page():
    dialog = ui.dialog().mark('yes_no_dialog')
    with dialog:
        with ui.card():
            dialog_label = ui.label()
            with ui.row():
                ui.button('YES', on_click=lambda: (dialog.submit('Yes')))
                ui.button('NO', on_click=lambda: (dialog.submit('No')))

    ui.label("TCP Socket Integrated with NiceGUI").classes("text-2xl")

and using muticasting, it works

if command == "show_dialog":
                text = command_data.get("content")
                result = ""
                for client in app.clients('/'):
                    with client.content:
                        for element in ElementFilter(kind=ui.dialog, marker='yes_no_dialog'):
                            result = await element
                writer.write(json.dumps({"response": result}).encode())
                await writer.drain()

[alexhuangdz]

Hello NineKo,
I am not tried your example, just a quick look, I think the reason might be your dialog do not attach to current user's client context.

[falkoschindler]

Exactly. Moving the creation of ui.dialog into the main_page function should help. And to open all dialogs, once a "show_dialog" command is received, you can use multicasting to work in the UI context of each connected client.

[falkoschindler]

To find the dialog in each client, you can use an ElementFilter as demonstrated here: #3968.

[Nineko]

Thank you so much, it worked! I also realized that I was still using version 2.1.0 of NiceGUI, which explains why some features weren’t working despite my efforts. I feel like I’ve grown from this experience—thank you to the NiceGUI team!