NextJS WebSocket数据流提取问题：多币种实时价格动态过滤实现

项目背景 #

正在开发一款基于NextJS的加密货币交易应用，通过WebSocket对接Bybit交易所API获取全币种实时价格流（必须使用WebSocket，因为常规请求无法获取实时更新且存在调用频率限制）。

当前问题 #

• 在NextJS中，WebSocket需在useEffect钩子中使用，且钩子需返回关闭方法以避免刷新/页面跳转时创建重复连接。
• 现有实现订阅全币种价格流，通过内部过滤逻辑仅更新当前选中币种的状态，单币种场景运行正常。
• 但应用需支持多币种同时展示：切换币种或新增活跃币种时，现有实现无法向已建立的WebSocket传递新参数，只能关闭旧连接并创建新连接，导致连接不稳定（偶尔无法关闭/打开）、多币种价格更新延迟，不符合交易应用的实时性要求。

理想需求 #

维持单WebSocket长期连接，提取数据流后动态过滤所需币种，无需频繁重连。曾考虑Redux、NextJS 13 App Router但未找到可行方案；也设想过服务端部署WebSocket再转发，但希望得到更简洁的客户端实现方案。

解决方案 #

核心思路：将WebSocket连接与过滤逻辑解耦，把需要监听的币种列表维护在组件状态中，WebSocket仅负责接收全量数据，每次收到消息时根据最新的币种列表动态过滤并更新状态，无需重连。

修改后的代码实现 #

组件中的useEffect重构

useEffect(() => {
  const pricesWS = new WebSocket(trader.pricesUrl);
  let pingInterval: NodeJS.Timeout;

  const initWebSocket = async () => {
    const res = await axios.get(`https://api-testnet.bybit.com/v5/market/instruments-info?category=linear`);
    const coins = res.data.result.list;

    pricesWS.onopen = () => {
      console.log('prices webSocket opened');
      // 发送ping维持连接
      pingInterval = setInterval(() => {
        pricesWS.send(JSON.stringify({ op: 'ping' }));
      }, 30000);
      pricesWS.send(JSON.stringify({ op: 'ping' }));

      // 订阅全币种ticker
      coins.forEach(coin => {
        pricesWS.send(
          JSON.stringify({
            op: 'subscribe',
            args: [`tickers.${coin.symbol}`],
          })
        );
      });
    };

    pricesWS.onerror = () => {
      clearInterval(pingInterval);
      console.log('WebSocket error');
    };

    pricesWS.onclose = () => {
      clearInterval(pingInterval);
      console.log('prices WS closed!');
    };

    // 维护全币种价格缓存
    const allPrices = new Map<string, string>();

    pricesWS.onmessage = (e) => {
      const res = JSON.parse(e.data.toString('utf8'));
      if (res.data?.symbol && /USDT/i.test(res.data?.symbol) && res.data.lastPrice) {
        const { symbol, lastPrice } = res.data;
        // 更新全量价格缓存
        allPrices.set(symbol, lastPrice);

        // 根据当前coinsHistory过滤需要更新的币种
        const updatedCoins = Array.from(allPrices.entries())
          .filter(([symbol]) => coinsHistory.includes(symbol))
          .map(([label, price]) => ({ label, price }));
        
        // 只在有变化时更新状态（避免不必要重渲染）
        setPrice(prev => {
          const isSame = updatedCoins.every(coin => {
            const prevCoin = prev.find(p => p.label === coin.label);
            return prevCoin && prevCoin.price === coin.price;
          }) && prev.length === updatedCoins.length;
          return isSame ? prev : updatedCoins;
        });
      }
    };
  };

  initWebSocket();

  return () => {
    if (pricesWS.readyState === WebSocket.OPEN) {
      pricesWS.close();
    }
  };
}, []); // 空依赖数组，组件挂载仅创建一次连接

关键优化点 #

• 单连接维持：useEffect依赖为空，仅在组件挂载时创建一次WebSocket连接，彻底避免频繁重连问题。
• 全量价格缓存：用Map维护所有币种的最新价格，高效存储与更新，避免重复解析数据。
• 动态过滤：每次收到消息时，直接读取当前组件的coinsHistory状态过滤目标币种，实时响应币种列表的变化。
• 减少不必要重渲染：更新状态前对比新旧数据，仅在价格确实变化时触发状态更新，优化组件性能。

额外建议 #

• 若需在多个组件间共享WebSocket连接和价格数据，可使用React Context封装WebSocket实例与价格缓存，避免重复创建连接。
• 可添加连接异常自动重连逻辑：在onclose或onerror事件中触发重连（需设置重连间隔，避免频繁重试），进一步提升连接稳定性。

内容的提问来源于stack exchange，提问作者Eugene1111