Update the DOM on websocket event

[MuongKimhong]

Hi,
In my app, I have a function running in thread listening to websocket event message. I want to update the DOM whenever I receive the message from websocket server. My problem is that whenever I receive the message and update the DOM it gave me a RunTimeError. Please see my code below.

I'm using socket-io in python client. https://python-socketio.readthedocs.io/en/latest/client.html#installation (python implementation of Socket-io)

# some other imports
from textual.widgets import ListView, ListItem
from textual.widget import Widget
from textual import work
import socketio

websocket = socketio.SimpleClient()
websocket.connect("http://localhost:3000")

class MessageAreaWidget(Widget):
    list_view = reactive(ListView(*[], id="messages-list-view"), always_update=True)
    default_messages = ["Welcome Back", "How are you"]

    def compose(self) -> ComposeResult: 
        yield Container(self.list_view, id="messages-container")

        for message in self.default_messages:
             self.list_view.append(
                 ListItem(Static(message), class="list-item")
             )

class MyScreen(Screen):
    def compose(self) -> ComposeResult:
        yield MessageAreaWidget()

        self.websocket_receive()
        
    @work(exclusive=True, thread=True)
    def websocket_receive(self):
        while True:
            event = websocket.receive()
            # event[0] is event name
            # event[1] is message

            if event[0] == "newmessage":
                self.query_one(MessageAreaWidget).list_view.append(
                    ListItem(Static(event[1]), classes="list-item")
                )

As you can see, I'm trying to append new message into ListView withinMessageAreaWidget but it gives me error:

context = None                                                            
coro = <coroutine object MessagePump._process_messages at 0x10e302960> 
name = 'message pump ListItem()'
RuntimeError: no running event loop

Everything works fine except whenever I receive event message.

Thanks you

[davep]

See again the worker guide advice on thread safety and updating your application.

[MuongKimhong]

Thanks you davep!

Here is how I get it to work.

# some other imports
from textual.widgets import ListView, ListItem
from textual.message import Message
from textual.widget import Widget
from textual import work
import socketio

websocket = socketio.SimpleClient()
websocket.connect("http://localhost:3000")

class MessageAreaWidget(Widget):
    list_view = reactive(ListView(*[], id="messages-list-view"), always_update=True)
    default_messages = ["Welcome Back", "How are you"]

    # custom message
    class Receive(Message):
        def __init__(self, event) -> None:
            self.event = event
            super().__init__()

    def compose(self) -> ComposeResult: 
        yield Container(self.list_view, id="messages-container")

        for message in self.default_messages:
            self.list_view.append(
                ListItem(Static(message), classes="list-item")
            )
        
        self.websocket_receive()
        
    @work(exclusive=True, thread=True)
    def websocket_receive(self):
        while True:
            event = websocket.receive()
            # event[0] is event name
            # event[1] is message

            if event[0] == "newmessage":
                self.post_message(self.Receive(event[1]))

class MyScreen(Screen):
    def compose(self) -> ComposeResult:
        yield MessageAreaWidget()

    def on_message_area_widget_receive(self, message: MessageAreaWidget.Receive) -> None:
        self.query_one(MessageAreaWidget).list_view.append(
            ListItem(Static(message.event), classes="list-item")
        )