Socket.io 连接异常：单客户端触发两次连接创建问题

问题现象 #

单个玩家访问localhost:3000时，服务器端connection事件触发两次，生成两个客户端实例与ID；断开连接时两个实例同时被移除，引发逻辑异常。

可能原因 #

• 前端重复发起Socket连接请求：比如重复引入socket.io脚本、代码中多次调用io()初始化连接
• Socket.io传输机制：浏览器默认会先尝试HTTP轮询再升级到WebSocket，部分场景下可能触发两次connection事件
• 手动覆盖client.id：Socket.io自带唯一连接ID，手动生成随机ID不仅多余，还可能加剧两次连接的逻辑混乱

修复方案 #

1. 确保前端只初始化一次连接 #

检查前端代码，保证仅调用一次io()：

// 正确示例：全局只初始化一次Socket连接
const socket = io('http://localhost:3000');

同时排查是否存在重复引入socket.io.js文件的情况。

2. 使用Socket.io自带的唯一连接ID #

移除手动生成ID的代码，直接使用系统自带的client.id，它是每个连接的唯一标识：

io.on('connection', (client) => {
  client_list[client.id] = client;

  let player = new Player(client.id)
  player_list[client.id] = player;

  client.emit('init', client.id)
  console.log(client.id + ' connected')

  client.on('disconnect', () => {
      console.log(client.id + ' disconnected')
      delete client_list[client.id]
      delete player_list[client.id]
  });
});

3. 限制Socket.io传输方式（可选） #

如果是HTTP轮询与WebSocket切换导致的双重触发，可指定仅使用WebSocket传输：
服务器端配置：

const io = require('socket.io')(server, {
  transports: ['websocket']
});

前端对应配置：

const socket = io('http://localhost:3000', {
  transports: ['websocket']
});

4. 排除浏览器插件干扰 #

尝试在浏览器隐身模式下测试，排除广告拦截器、调试插件等导致的重复请求问题。

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