本文详解如何在 React 应用中正确拦截页面刷新/关闭行为，结合 beforeunload 事件与 Socket.IO 连接管理，在用户确认离开后才执行 socket 断开逻辑，避免“未选择即断连”的竞态问题。
本文详解如何在 react 应用中正确拦截页面刷新/关闭行为，结合 `beforeunload` 事件与 socket.io 连接管理，在用户确认离开后才执行 socket 断开逻辑，避免“未选择即断连”的竞态问题。
在 React + Socket.IO 的实时协作场景（如在线对战游戏、协同编辑）中，一个常见且关键的需求是：当用户尝试刷新或关闭页面时，弹出确认提示，并仅在用户明确选择“离开”后，才向服务端发送 leave_room 或 new_host 等业务信号，完成优雅退出。然而，许多开发者会发现：尽管 beforeunload 弹出了原生浏览器提示框，但 socket 连接却在用户尚未点击“确定”或“取消”前就已断开——这导致状态不一致、房间残留、主机切换失败等问题。
根本原因在于：
✅ beforeunload 是同步阻塞事件，浏览器会立即显示提示框；
❌ 但它不等待异步操作完成（如 socket.emit()），且一旦页面开始卸载，所有 JS 执行环境将被快速终止，后续回调（包括 socket 的 emit 响应、disconnect 事件）极大概率无法执行或被丢弃。
因此，不能依赖 beforeunload 内部发起异步网络请求，而应将其严格用于“提示”，将实际的 socket 清理和路由跳转逻辑，委托给更可靠的时机——例如监听 socket.disconnect 事件（由服务端主动触发断连）或用户显式确认后的手动处理。
以下是经过验证的专业实践方案：
✅ 正确做法：分离提示与清理，利用 disconnect 事件兜底
import React, { useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
function Game() {
const navigate = useNavigate();
// 假设 socket、isHost、hasOpponent、room 已通过上下文或 props 注入
// const { socket, isHost, hasOpponent, room } = useGameContext();
// 控制是否触发 beforeunload 提示
const [shouldPrompt, setShouldPrompt] = useState(true);
// 1️⃣ beforeunload：仅负责同步提示，不执行任何异步操作
const handleBeforeUnload = useCallback((event: BeforeUnloadEvent) => {
if (shouldPrompt) {
event.preventDefault();
event.returnValue = '您正在参与游戏，刷新将退出房间。确定要离开吗？'; // 兼容 Chrome/Firefox
return event.returnValue;
}
}, [shouldPrompt]);
// 2️⃣ 用户确认离开后，主动触发 socket 清理（非在 beforeunload 中！）
const handleUserConfirmLeave = useCallback(() => {
if (!shouldPrompt) return;
// 发送业务语义明确的退出指令
if (isHost && hasOpponent) {
socket.emit('new_host', room);
} else {
socket.emit('leave_room', room);
}
// 关键：立即禁用 prompt，防止重复触发
setShouldPrompt(false);
navigate('/');
}, [shouldPrompt, isHost, hasOpponent, room, socket, navigate]);
// 3️⃣ 监听 socket 断连事件作为最终兜底（例如用户强制关闭标签页）
const handleSocketDisconnect = useCallback(() => {
if (shouldPrompt) {
// 若用户未手动触发 leave，但 socket 已断开，仍需清理服务端状态
socket.emit('leave_room', room);
setShouldPrompt(false);
navigate('/');
}
}, [shouldPrompt, room, socket, navigate]);
useEffect(() => {
// 注册 beforeunload 和 socket 事件
window.addEventListener('beforeunload', handleBeforeUnload);
socket.on('disconnect', handleSocketDisconnect);
// ⚠️ 注意：不要在此处注册 confirm 点击逻辑！
// 浏览器原生提示无 API 捕获“确定/取消”按钮点击，
// 因此我们采用「用户主动调用 handleUserConfirmLeave」+「disconnect 兜底」双保险
return () => {
window.removeEventListener('beforeunload', handleBeforeUnload);
socket.off('disconnect', handleSocketDisconnect);
};
}, [
handleBeforeUnload,
handleSocketDisconnect,
socket
]);
// ? 推荐：在 UI 中提供显式“退出房间”按钮，绑定 handleUserConfirmLeave
// 这样可完全绕过 beforeunload 的不可控性，体验更可靠
const handleExitClick = () => {
if (window.confirm('确定退出当前游戏房间？')) {
handleUserConfirmLeave();
}
};
return (
<div>
<button onClick={handleExitClick}>退出房间</button>
{/* 其他游戏组件 */}
</div>
);
}
export default Game;⚠️ 关键注意事项
- beforeunload 的返回值是只读提示：现代浏览器（Chrome ≥98、Firefox ≥90）已屏蔽自定义消息，仅显示统一文案，且无法捕获用户点击“确定”或“取消”的动作。因此，切勿在其中调用 socket.emit 或 navigate。
- popstate 不适用于刷新场景：popstate 仅响应 history.pushState/replaceState 后的前进/后退，对 F5 刷新、地址栏回车、关闭标签页完全无效，原代码中该逻辑可安全移除。
- navigate.block 已废弃：React Router v6.4+ 移除了 useBlock 和 navigate.block，应改用 usePrompt（v6.10+）或上述 beforeunload + 主动清理组合方案。
- 服务端需配合幂等设计：leave_room 和 new_host 接口必须支持重复调用（如检查 room 是否仍存在、用户是否仍在房间内），以应对客户端因网络异常未能送达的情况。
✅ 总结
优雅处理页面卸载的核心原则是：提示归提示，清理归清理，二者解耦，事件驱动。
✅ 使用 beforeunload 同步弹出浏览器原生确认框；
✅ 通过显式 UI 按钮（或 keydown 监听 Alt+F4/Ctrl+W 等）触发 socket.emit + navigate；
✅ 用 socket.disconnect 事件作为强制退出的最终兜底；
✅ 始终维护 shouldPrompt 状态防止重复提示与误操作。
如此，即可在保障用户体验的同时，确保 Socket.IO 连接状态与服务端业务逻辑严格一致。
