React + websocket：有没有办法限制 websocket 更新组件的次数

Question

我有一个订单簿组件，它正在从此 websocket 端点获取数据"wss://ws.bitstamp.net"

订阅在内部触发useEffect

 useEffect(() => {
    const subscribe = {
      event: "bts:subscribe",
      data: {
        channel: `order_book_${currencyPair}`
      }
    };
    const ws = new WebSocket("wss://ws.bitstamp.net");

    ws.onopen = () => {
      ws.send(JSON.stringify(subscribe));
    };
    ws.onmessage = (event) => {
      const response = JSON.parse(event.data);
      setOrders(response.data);
    };
    ws.onclose = () => {
      ws.close();
    };

    return () => {
      ws.close();
    };
  }, [currencyPair]);

但现在的问题是更新太频繁了。我希望它最多每 2 秒更新一次。我想知道我怎样才能做到这一点？我的第二个问题是，有没有办法让我知道 WebSocket 端点向前端传输数据的频率？我对 WebSocket 还很陌生，但我知道它是全双工的，并且服务器正在将数据推送/流式传输到客户端。我很好奇是否有办法知道前端的频率？

这是现场演示https://codesandbox.io/s/orderbook-forked-r2719?file=/src/OrderBook.js

Answer 1

您可以使用缓冲区并以一定的时间间隔刷新它setInterval，如下所示：

  useEffect(() => {
    const subscribe = {
      event: "bts:subscribe",
      data: {
        channel: `order_book_${currencyPair}`
      }
    };
    const ws = new WebSocket("wss://ws.bitstamp.net");

    const data = new Set();
    const flush = () => {
        for (const value of data)
          setOrders(JSON.parse(value).data);
        data.clear();
    };
    let timer = setInterval(flush, 2000);

    ws.onopen = () => {
      ws.send(JSON.stringify(subscribe));
    };
    ws.onmessage = (event) => {
      data.add(event.data);
    };
    ws.onclose = () => {
      ws.close();
    };

    return () => {
      clearInterval(timer);
      ws.close();
      flush();
    };
  }, [currencyPair]);