Coding a Multi-User Chat App With NiceGUI

chat_app.py

from uuid import uuid4
from nicegui import ui

messages = []

@ui.refreshable
def chat_messages(own_id):
    for user_id, avatar, text in messages:
        ui.chat_message(avatar=avatar, text=text, sent=user_id==own_id)

@ui.page('/')
def index():
    def send():
        messages.append((user, avatar, text.value))
        chat_messages.refresh()
        text.value = ''

    user = str(uuid4())
    avatar = f'https://robohash.org/{user}?bgset=bg2'
    with ui.column().classes('w-full items-stretch'):
        chat_messages(user)

    with ui.footer().classes('bg-white'):
        with ui.row().classes('w-full items-center'):
            with ui.avatar():
                ui.image(avatar)
            text = ui.input(placeholder='message') \
                .props('rounded outlined').classes('flex-grow') \
                .on('keydown.enter', send)

ui.run()

Install NiceGUI with pip install nicegui
Run with python3 chat_app.py

This is a condensed version of the official Chat App example from https://nicegui.io.

I just uploaded a 60 sec fast forward video on YouTube, showing how to code it from scratch.

That is so great ! it should be the better example in fastapi websock too. fastapi offical

This works great! Thank You