Initiate and append Websocket updates to clientside variable

edbr1 · August 30, 2024, 3:53pm

The example sends a full new dataset (array with 10 random numbers) in each ws msg, and then plots this new data series. Another (probably more common) real-world scenario would be a websocket feed with a new additional datapoint in each ws msg, to form a live expanding time-series.

Using the clientside callback makes perfect sense to me in terms of performance and data transfer so I would like to keep that.
How would I initiate and then append a (global) variable, clientside, with the new data as it comes in, so that I can plot a live expanding timeseries graph?

Thank you for any help!

Emil · August 30, 2024, 5:49pm

I recently wrote the SSE component to enable a ChatGPT-like UI with text streaming,

github.com

emilhe/dash-extensions/blob/master/src/lib/components/SSE.js

import PropTypes from "prop-types";
import { useEffect, useState } from "react";
import { SSE as SSEjs } from "sse.js";


/**
 * The SSE component makes it possible to collect data from e.g. a ResponseStream. It's a wrapper around the SSE.js library.
 * https://github.com/mpetazzoni/sse.js
 */
const SSE = ({ url, options, concat, animate_delay, animate_chunk, animate_prefix, animate_suffix, setProps, done }) => {
  const [data, setData] = useState("");
  const [animateData, setAnimateData] = useState("");
  const animate = animate_delay > 0 && animate_chunk > 0;

  useEffect(() => {
    // Reset on url change.
    setProps({ done: false })
    setData("")
    setAnimateData("")
    // Don't do anything if url is not set.

This file has been truncated. show original

I haven’t gotten around to writing docs for it yet, but depending on your use case it might serve as (part of) a solution. Or simply as inspiration

edbr1 · August 31, 2024, 9:11am

Thanks for the reply Emil. I think my understanding is not solid enough yet to grasp how your code helps me reach my goal.

I’m starting to think it makes more sense for live websocket graphing to use plotly.js such that everything runs client side? Rather than bending something which is designed to be server side to act more client side…

Emil · August 31, 2024, 12:11pm

The benefit of the SSE component is that it supports buffering (concatenation) of data out of the box. You could in principle do the same with a websocket component and clientside callback(s), but I suspekt it will be less robust (e.g. you might loose some data, if the streaming is fast).

Topic		Replies	Views
Dash-extensions only work with clientside callbacks? Dash Python question	5	335	October 23, 2023
Build a realtime Dash App with websockets Dash Python show-and-tell	2	3619	January 2, 2021
Dash content update from external websocket client Dash Python	0	752	January 11, 2022
Render HTML Elements Clientside Callback Dash Python	3	953	October 25, 2021
Streaming in Dash like ChatGPT Dash Python show-and-tell	2	367	September 18, 2024

Initiate and append Websocket updates to clientside variable

Related topics