Streaming Server-side State Changes

[adamocarolli]

Hi! I'm looking to see if there is a recommended (or hacky) path to stream data into Mesop's state from the server and have it update on the client. (Without using a client-side trigger to invoke or continuous polling)

I'm looking to enable:

• Receiving data from a multiprocessing Pipe or Queue and using that data to update mesop's state and trigger a client render.

Example use case is a stock trading app where we receive live updates from a websocket, gRPC message, message queue (rabbit MQ) or a similar push message on one process that then sends a message to the process Mesop is running on with the updated stock data. Mesop takes this data updates its state and then re-renders the chart (or similar) that shows the live stock chart. Other use cases may involve IoT sensor streaming etc. ie. your thermostats temperature reading in real-time.

[wwwillchen]

Right now there isn't a great way to do this. You can create a web component that does something like a setInterval and essentially trigger a MesopEvent so you can check if there's new data on the server, but this is admittedly hacky and involves some overhead.

Are you trying to update the data for all the sessions/users connected or one specific session? We're working on a websockets feature which is still very experimental, but we could eventually add some kind of support to push data from the server to the client. Right now, with the default HTTP SSE (server-sent events) transport that we use in Mesop, there's not a good way to push data from the server to the client.

[adamocarolli]

That's a good idea, have a polling web component that calls back to any function the user defines which checks for data and updates it. This gives near real-time performance not quite push but mimics it.

I'd want to update the data for a specific session/user likely based on a search criteria from them.

Had looked at hijacking the flask app you create, add my own websocket API and then mimicking a ui event to update state by directly getting the runtime().context() and modifying, but it was definitely getting a bit ugly and felt like I'd be incompatible every version.

[richard-to]

Another temporary option could be to create a web component that creates a web socket connection to a say a Fast API server. This Fast API server could receive the push events, which could be forwarded to your web component, which could then trigger an event to Mesop which could then update the UI. Not ideal either since you have some extra hops here and so may not be the best if you need really low latency for stock trading app for example.

[adamocarolli]

On each push web component tells backend that there is new data, server handler grabs that new data and transforms/handles it however we please in Python. Also viable if we take the redirection hit.

[adamocarolli]

Thanks for all the help! For defining my own web socket (mqtt or similar) on the Python side how would you go about recommending this? Is the idea that we'd define these interfaces in the app logic itself. Looking for an example similar to this one from NiceGUI: https://github.com/zauberzeug/nicegui/tree/main/examples/zeromq where there is a way to hook into the startup process

[richard-to]

Until we can integrate push support with our experimental Web Sockets integration, you'll have to define the push interfaces outside of the Mesop app.

Basically create FastAPI server (See https://google.github.io/mesop/guides/server-integration/). FastAPI has web socket support (https://fastapi.tiangolo.com/advanced/websockets/) so that may be the easiest integration path. I haven't used MQTT yet, so but if you can make a web socket connection directly, then you could skip the Fast API server part.

Now your custom Web Component will serve as the mediator between your Web Socket server and Mesop App. The Web Component will initialize the web socket connection. For Web Component tutorial, see https://google.github.io/mesop/web-components/

When defining the Web component in your Mesop app, you can pass in the necessary metadata to connect to the web socket endpoint.

The WebSocket endpoint would push the event data to your Web Component, which would forward it to Mesop as an event. Mesop would then receive the event. Based on what the event is, you can update your Mesop state which would update the UI. Mesop would just see it as a user event.

Let me know if that makes sense. I know I'm kind of hand-waving a bit.