React JS移动端浏览器Solidity事件监听器失效问题解决方案咨询

问题1：Solidity事件监听器切后台后失效的解决方案 #

核心原因

浏览器切后台后会进入休眠状态限制JS执行，Web3基于WebSocket的事件订阅大概率会断开；另外你当前的代码只在卸载时标记isMounted = false，没有实际取消旧订阅，导致残留订阅干扰新连接，刷新后才会重置。

具体修复方案

1. 保存订阅实例，组件卸载时主动取消
   每次创建订阅后保存实例，在清理阶段调用unsubscribe()，避免内存泄漏和无效订阅残留。

2. 监听页面可见性，前台恢复时重连
   利用浏览器的visibilitychange事件，当页面从后台切回前台时，重新初始化监听器。

3. 错误回调触发重连
   在订阅出错时，通过更新依赖项让useEffect重新执行，创建新的订阅。

修改后的代码：

useEffect(() => {
  let subscription;
  let isMounted = true;

  const initEventListener = () => {
    if (!isMounted || !props.blockchain.smartContract || props.users.length === 0) return;

    // 先取消旧订阅
    if (subscription) {
      subscription.unsubscribe().catch(err => console.log("取消订阅失败:", err));
    }

    subscription = props.blockchain.smartContract.events.Transfer({})
      .on("connected", (subscriptionId) => {
        console.log("订阅ID:", subscriptionId);
      })
      .on('data', (event) => {
        const item = { 
          key: event.transactionHash,
          sender: event.returnValues.from, 
          recipient: event.returnValues.to, 
          value: event.returnValues.value / (10 ** 18), 
          type_id: '1', 
          interval: '1s' 
        };
        setFeed(item, event);
        console.log("交易哈希:", event.transactionHash);
      })
      .on('changed', (event) => {
        // 这里补本地数据移除逻辑
      })
      .on('error', (error) => {
        console.log("订阅错误:", error);
        // 更新coinEvent触发useEffect重新执行，创建新订阅
        setCointEvent(prev => prev + 1);
      });
  };

  // 初始化监听器
  initEventListener();

  // 监听页面切回前台事件
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'visible') {
      initEventListener();
    }
  };
  document.addEventListener('visibilitychange', handleVisibilityChange);

  // 清理操作
  return () => {
    isMounted = false;
    if (subscription) {
      subscription.unsubscribe().catch(err => console.log("取消订阅失败:", err));
    }
    document.removeEventListener('visibilitychange', handleVisibilityChange);
  };
}, [props.blockchain.smartContract, props.users, coinEvent]);

4. 可选优化：开启Provider心跳
   初始化Web3 Provider时设置keepAlive: true，维持WebSocket连接活跃，减少后台断开概率。

问题2：React JS Hooks能否识别用户关闭浏览器的操作？ #

可以实现，通过监听浏览器的beforeunload事件，结合useEffect绑定/清理监听逻辑。

示例代码：

useEffect(() => {
  const handleBeforeUnload = (e) => {
    // 这里可以执行清理操作，比如取消Web3订阅、临时保存状态等
    // 若要提示用户，需设置returnValue（部分浏览器仅显示默认提示）
    e.preventDefault();
    e.returnValue = ''; // 兼容不同浏览器
  };

  window.addEventListener('beforeunload', handleBeforeUnload);

  return () => {
    window.removeEventListener('beforeunload', handleBeforeUnload);
  };
}, []);

注意：

• 浏览器对自定义提示文本有严格限制，多数情况会显示系统默认提示。
• 该事件在关闭标签页、刷新页面、关闭浏览器时都会触发，无法精准区分操作类型。

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