我应该如何有效地从 Svelte 商店订阅添加到数组？

如何解决我应该如何有效地从 Svelte 商店订阅添加到数组？

每次更新订阅的商店时，我都希望将对象添加到组件中的数组中。在这种情况下，商店正在从 WebSocket 接收数据，我最终想绘制我收到的最后 N 个数据点（例如 N=1000）。

存储在 socket.js 中定义：

import { readable } from 'svelte/store';

export const datastream = readable([],set => {
  let socket = new WebSocket("ws://localhost:8765")
  let data = [];

  socket.onmessage = function (event) {
    let { time,value } = JSON.parse(event.data);

    // update the data array
    // Todo: set a max buffer size
    data = [...data,{"time": time,"value": value}];

    // set the new data as store value
    set(data)
  }
})

然后我有一个 Chart.svelte 组件，它应该 a) 绘制最后的 N 点（未显示实现），b) 每次我的商店订阅回调发生时更新。这里的问题是我可能需要对传入的 WebSocket 数据进行一些小的转换/预处理。在我的 Chart.svelte 中，我们（为简洁起见省略了绘图内容）：

<script>
  ...
  import { datastream } from './socket.js';

  export let plot_data;

  const unsubscribe = datastream.subscribe(data => {
    plot_data = []
    for (let datum of data) {
      plot_data = [...plot_data,{x: datum.time,y: datum.value}]
    }
  });

  $: {...
      some stuff that sets up plotting
  ...}
</script>

<div class='my-chart'>
    ...(plot_data)
</div>

我的问题是；这是最好的方法吗？我认为它不是 - 它可以工作，但是我在 datastream 存储中有一个数据数组的副本，并且每次获得新值时，我都会完全重建 plot_data 数组。

我曾尝试仅使用商店中订阅的最新数据点来执行此操作，但我无法弄清楚如何捕获商店更新，从而强制将新条目添加到 plot_data 数组（和因此，刷新情节）。

解决方法

这是您要找的吗：

查看此回复：receive updates in batches

但是使用这家商店供您使用：

let socket = new WebSocket("ws://localhost:8765")

const datastream = readable(null,set => {
  socket.onmessage = function (event) {
   set ({ time,value } = JSON.parse(event.data));
  };
});