如何区分页面刷新与关闭/离开操作？SignalR场景解决方案问询

1. 原有方法失效原因 #

• performance.getEntriesByType("navigation")[0].type 获取的是当前页面加载时的导航类型，而非即将执行的卸载操作类型。比如刷新页面后该值会固定为reload，后续无论关闭还是再次刷新，这个值都不会改变，因此无法用来判断当前要执行的操作类型。
• 现代浏览器（Chrome 51+、Firefox 44+等）已禁用自定义beforeunload提示文本，无论设置e.returnValue还是返回字符串，都会显示浏览器默认提示，自定义文本不会生效。

2. 区分刷新与关闭/离开的可行方案 #

通过监听用户主动触发的刷新操作（快捷键、刷新按钮）标记状态，再在卸载事件和SignalR的onclose中根据状态区分处理：

步骤1：定义状态标记 #

在组件内声明状态变量，标记是否为刷新操作：

const [isReloading, setIsReloading] = useState(false);

步骤2：监听刷新触发事件 #

监听刷新快捷键及页面可见性变化，标记刷新状态：

useEffect(() => {
  // 监听键盘刷新快捷键（F5、Ctrl+R、Cmd+R）
  const handleKeyDown = (e) => {
    if (e.key === 'F5' || 
        (e.ctrlKey && e.key === 'r') || 
        (e.metaKey && e.key === 'r')) {
      setIsReloading(true);
    }
  };

  // 监听页面可见性变化，辅助判断非刷新类的页面卸载
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'hidden' && !isReloading) {
      // 标记为关闭/离开操作
    }
  };

  window.addEventListener('keydown', handleKeyDown);
  document.addEventListener('visibilitychange', handleVisibilityChange);

  return () => {
    window.removeEventListener('keydown', handleKeyDown);
    document.removeEventListener('visibilitychange', handleVisibilityChange);
  };
}, [isReloading]);

步骤3：在beforeunload中处理状态 #

useEffect(() => {
  const handleBeforeUnload = (e) => {
    if (!isReloading) {
      // 关闭/离开时触发默认提示（无法自定义文本）
      e.preventDefault();
      e.returnValue = ''; // Chrome要求必须设置该属性才会触发提示
    }
    // 刷新操作可跳过提示或做临时处理
  };

  window.addEventListener('beforeunload', handleBeforeUnload);

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

步骤4：在SignalR的onclose中区分操作 #

在SignalR连接的onclose事件里，根据标记执行对应逻辑：

useEffect(() => {
  const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub")
    .build();

  connection.onclose(async (error) => {
    if (isReloading) {
      // 刷新操作：重新建立连接或跳过特殊处理
      await connection.start().catch(err => console.error(err.toString()));
    } else {
      // 关闭/离开操作：执行特定逻辑，比如通知服务器用户离线
      console.log("用户已离开页面");
    }
  });

  connection.start().catch(err => console.error(err.toString()));

  return () => {
    connection.stop();
  };
}, [isReloading]);

3. 注意事项 #

• 该方案无法覆盖所有极端场景（比如用户通过任务管理器强制关闭浏览器），但能处理绝大多数主动操作场景。
• 浏览器beforeunload提示的文本无法自定义，这是浏览器的安全限制，无法绕过。
• 必须使用组件状态（如useState）存储isReloading，避免组件重新渲染导致状态丢失。

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