Passing data from JS client-side code to a dash app

Dash Python
1

Hey guys, hope you are all fine.

I’m currently implementing a data sharing functionality within my dash app. Essentially, the user can choose some data and then share with some other people. I implemented all the communications using web sockets, specifically Flask-SocketIO..

The data is received by the user using the socket.io JS implementation in a custom JS file in the assets folder. The transmitting-receiving data is already working, but I was wondering if it is possible to put this data in the dcc.Store using the client-side JS code. Is this even doable? Has anyone stumbled with this before?

I know that dash-extensions has a WebSocket component, but using it would require declaring a web socket endpoint and thus I would loose things like rooms implemented in Flask-SocketIO.

2

Hello @jkpeq,

Yes, retrieving data from a store is possible via a client-side callback.

Since the client-side has complete access to the client’s browser, to update a secondary dcc.Store, or even the same store if the intervals are spread out enough. You can do something like this:

app.clientside_callback(
"""function (n) {
     if (n) {
        return localStorage.getItem("your_store")
    }
    return window.dash_clientside.no_update
}""",
Output("your_store", "data"), Input("your_trigger","n_clicks")
)

I prefer using a hidden button for the trigger, as this is easily accessible via JQuery or JS to trigger the event. :slight_smile:

If this isnt quite right, it should be close.

1 Like