0

每次更新订阅的商店时，我都希望将对象添加到组件中的数组中。在这种情况下，商店正在从 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数组中添加新条目（从而刷新绘图）。

4

1 回答 1

1

这是你想要的：

看到这个repl：批量接收更新

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

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

const datastream = readable(null, set => {
  socket.onmessage = function (event) {
   set ({ time, value } = JSON.parse(event.data));
  };
});
于 2021-03-04T12:56:19.787 回答