Build a realtime Dash App with websockets

Dash Python
1

Currently, the official live update example is using an interval component to pull the data from server side, so it is pull mode. Here I tried to create a push mode component which based on the websocket. I shared the detail steps in Build a realtime Dash App with websockets | by Jacky Shi | Medium

DashWebsocket.react.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { w3cwebsocket as W3CWebSocket } from "websocket";

/**
 * DashWebsocket is an adapter for websocket.
 * It takes two property, `url` and 'msg'
 * `url` indicates the websocket url
 * `msg` display the message returns from webscoket
 */
export default class DashWebsocket extends Component {
    componentDidMount() {
        const url = this.props.url;
        const client = new W3CWebSocket(url);
        client.onopen = () => {
            console.log('websocket connected');
        }
        client.onmessage = (message) => {
            this.props.setProps({ msg: message.data})
        }
    }


    render() {
        const {id, setProps, url, msg} = this.props;

        return (
            <div id={id}>
                <table>
                    <tbody>
                        <tr><td>url</td><td><input defaultValue={url}/></td></tr>
                        <tr><td>msg</td><td><textarea defaultValue={msg}/></td></tr>
                    </tbody>
                </table>
            </div>
        );
    }
}

DashWebsocket.defaultProps = {};

DashWebsocket.propTypes = {
    /**
     * The ID used to identify this component in Dash callbacks.
     */
    id: PropTypes.string,

    /**
     * The websocket response message.
     */
    msg: PropTypes.string,

    /**
     * The url for websocket.
     */    
    url: PropTypes.string.isRequired,

    /**
     * Dash-assigned callback that should be called to report property changes
     * to Dash, to make them available for callbacks.
     */
    setProps: PropTypes.func
};
3 Likes
2

Great job! There are so many “live updating” apps that use the interval component, when they should be using websockets. I haven’t seen this done with a JS Dash app yet. For those that are creating live-updating Dash/Plotly app using Django, this can also be done with Django Channels to serve the websockets. A very similar process to what you did can be implemented; when the client receives a message through the websocket, the data from the message can be added to the Dash/Plotly app.

1 Like
3

I have also recently written a Websocket component, and i have now published as part of dash-extensions==0.0.40,

When i have worked with it a little more, I think I will also write some guide/tutorial material. So far, i have only made a few toy examples (async long running processes, server push notifications, etc.), but they all worked as intended :slight_smile:

3 Likes