Skip to content
Advertisement

How should I efficiently add to an array from a Svelte store subscription?

I’d like to have objects added to an array in a component each time a subscribed store gets updated. In this case, the store is receiving data from a WebSocket, and I ultimately want to plot the last N datapoints that I’ve received (N=1000 for example).

The store is defined in socket.js:

JavaScript

I then have a Chart.svelte component which should a) plot the last N points (implementation not shown), b) update each time my store subscription callback occurs. The catch here is that I may need to do some minor conversion/preprocessing on the incoming WebSocket data. In my Chart.svelte we have (omitted the plotting stuff for brevity):

JavaScript

My question is; is this the best way to do this? I think it’s not – It works, but I’ve got a duplicate of the array of data in the datastream store, and each time I get a new value, I completely rebuild the plot_data array.

I had attempted to do this with only the most recent data point subscribed in the store, but I couldn’t figure out how to capture the store update and thereby force a new entry into the plot_data array (and thus, refresh the plot).

Advertisement

Answer

Is this what you are looking for:

See this repl: receive updates in batches

But use this store for your use:

JavaScript
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement