页面跳转后Socket.io连接是否保留？多弹窗问题求助

你遇到的这个问题，核心原因在于你用 document.open() 和 document.write() 加载新页面的方式并没有真正卸载原来的页面上下文。

通常来说，当用户通过正常的页面跳转（比如点击链接、设置 location.href）时，浏览器会完全卸载当前页面：销毁所有 JavaScript 变量、终止正在运行的脚本、关闭所有与页面关联的网络连接（包括 socket.io 连接）。但你的代码里用的是 AJAX 请求获取新页面内容，然后通过 document.open() 打开文档流，再用 document.write() 写入新内容——这种操作本质上是在同一个页面上下文里替换了 DOM 内容，原来页面中的 JavaScript 环境（包括你创建的 socket 实例、绑定的 disconnect 事件监听器）并没有被销毁，而是继续存在于内存中。

当服务器关闭时，所有这些存活的 socket 连接都会触发 disconnect 事件，每个旧的 socket 实例都会弹出你设置的提示弹窗，所以弹窗数量和页面跳转次数一致。

针对这个问题，你可以从以下几个方向修复：

1. 在加载新页面之前主动断开旧的 socket 连接 #

在发起 AJAX 请求或者调用 document.open() 之前，手动断开当前的 socket 连接，并移除事件监听器：

// 断开当前socket连接
if (socket) {
  socket.disconnect();
  // 移除disconnect事件监听器（可选，断开后事件不会再触发，但清理更彻底）
  socket.off('disconnect');
}

// 然后再执行你的AJAX请求
$.ajax({
  url: "gameStart",
  type: 'POST',
  data: {
    myName: myNickname,
    enemyName: accepter,
    roomNamer: "1",
    showValid: offerValidStr,
    showThreat: offerThreatStr
  },
  success: function(page) {
    document.open();
    document.write(page);
    document.close(); // 别忘了调用document.close()结束文档流，这很重要！
  }
});

注意：一定要调用 document.close()，否则文档流会一直处于打开状态，可能导致后续的资源加载或脚本执行异常。

2. 改用正常的页面跳转方式（推荐） #

既然你最终是要跳转到新页面，完全可以不用 AJAX 请求，直接用表单提交或者设置 location.href 的方式，让浏览器正常处理页面跳转，自动销毁旧页面的上下文：

比如用表单提交：

<!-- 把按钮改成表单提交 -->
<form action="gameStart" method="POST">
  <input type="hidden" name="myName" value="<%= myNickname %>">
  <input type="hidden" name="enemyName" value="<%= accepter %>">
  <input type="hidden" name="roomNamer" value="1">
  <input type="hidden" name="showValid" value="<%= offerValidStr %>">
  <input type="hidden" name="showThreat" value="<%= offerThreatStr %>">
  <button type="submit">启动游戏</button>
</form>

或者用 JavaScript 构造表单提交：

// 构造FormData传递POST参数
const formData = new FormData();
formData.append('myName', myNickname);
formData.append('enemyName', accepter);
formData.append('roomNamer', '1');
formData.append('showValid', offerValidStr);
formData.append('showThreat', offerThreatStr);

const form = document.createElement('form');
form.action = 'gameStart';
form.method = 'POST';
// 把FormData绑定到表单
for (let [key, value] of formData.entries()) {
  const input = document.createElement('input');
  input.type = 'hidden';
  input.name = key;
  input.value = value;
  form.appendChild(input);
}
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);

这种方式下，浏览器会卸载当前页面，所有旧的 socket 连接都会被自动关闭，不会出现多个弹窗的问题。

3. 在服务器端限制单个用户的socket连接数量 #

你也可以在服务器端做一层处理：当同一个用户（比如通过 session 识别）建立新的 socket 连接时，主动断开旧的连接。这样即使客户端有残留的连接，服务器也会清理掉，避免多个连接同时存在。

比如在 Node.js 的 socket.io 服务器代码里：

// 全局存储用户的活跃socket连接
const activeUsers = new Map();

io.on('connection', (socket) => {
  // 假设你用session获取用户唯一标识
  const userId = socket.request.session.userId;
  
  // 如果用户已有活跃连接，断开旧连接
  if (activeUsers.has(userId)) {
    activeUsers.get(userId).disconnect();
  }
  // 记录当前连接
  activeUsers.set(userId, socket);
  
  // ...其他业务逻辑
  
  socket.on('disconnect', () => {
    activeUsers.delete(userId);
  });
});

核心问题就是 document.open()/document.write() 没有销毁旧页面的 JS 上下文，导致旧的 socket 连接和事件监听器残留。最直接的解决方式是改用正常的页面跳转，或者在加载新页面之前主动清理旧的 socket 连接。

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