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

Question

每次订阅的商店更新时，我都希望将对象添加到组件中的数组中。在这种情况下，商店正在从 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 数据做一些小的 conversion/preprocessing。在我的 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 数组中（因此，刷新情节）。

Answer 1

这是您要找的吗：

查看此回复：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));
  };
});

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

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

javascript

arrays

websocket

svelte

svelte-store