Building real-time data plots using WebSocket and SSE

Flask’s WebSocket and SSE, discussed in Chapter 5, are effective mechanisms for implementing real-time graphical plots. Although other third-party modules can provide Flask with real-time capabilities, these two are still the safest, most flexible, and standard techniques because they are web components.

Let us start with applying WebSocket for real-time charts.

Utilizing the WebSocket

An application can have a WebSocket server that receives data from a form and sends it for plotting to a frontend visualization library. The following flask-sock WebSocket server immediately sends all the data it receives from a form page to the Chart.js script for data plotting:

@sock.route('/ch06/ws/server/hpi/plot')
def ws_server_plot(ws):
    async def process():
        while True:
            hpi_data_json...