SocketIO+Canvas多人游戏：用户断开后角色未消失的解决求助

嘿，这个问题其实很好解决，核心就是在用户断开连接时，从服务器的玩家数据中移除该用户，并通知所有客户端更新本地的玩家列表，这样画布就不会再绘制已断开的角色了。我来帮你修改代码并解释清楚：

一、服务器端（server.js）修改 #

你已经在监听disconnect事件，但还没完成逻辑。我们需要在用户断开时做两件事：移除服务器存储的该玩家数据，然后通知所有客户端同步这个变化。

修改后的connection回调代码如下：

var players = {};
io.on('connection', function(socket) {
  socket.on('new player', function() {
    players[socket.id] = { x: 300, y: 300 }
  });

  socket.on('movement', function(data) {
    var player = players[socket.id] || {};
    if(data.left) {
      player.x -= 5;
    }
    if(data.up) {
      player.y -= 5;
    }
    if(data.right) {
      player.x += 5;
    }
    if(data.down) {
      player.y += 5;
    }
  });

  socket.on('disconnect', function() {
    // 1. 从服务器的玩家对象中移除断开的用户
    delete players[socket.id];
    // 2. 通知所有客户端该用户已断开，传递其唯一标识socket.id
    io.emit('player disconnected', socket.id);
  });
});

另外，你之前每秒发送hi的定时器可以改成同步玩家数据的逻辑，这样客户端能实时拿到最新的玩家列表：

// 替换原来的setInterval
setInterval(function() {
  // 发送所有玩家的最新位置给所有客户端
  io.sockets.emit('update players', players);
}, 1000 / 60); // 60帧每秒，让角色移动更流畅

二、客户端代码修改 #

客户端需要监听服务器发送的两个关键事件：update players（同步所有玩家数据）和player disconnected（处理玩家离开），并维护本地的玩家列表，确保绘制画布时只渲染当前在线的玩家。

示例客户端代码如下：

// 获取Canvas上下文
const canvas = document.getElementById('your-canvas-id');
const ctx = canvas.getContext('2d');

// 连接SocketIO服务器
const socket = io();

// 本地存储所有在线玩家
let localPlayers = {};

// 监听服务器发送的玩家数据更新
socket.on('update players', (players) => {
  localPlayers = {...players};
});

// 监听玩家断开事件，移除本地对应的玩家数据
socket.on('player disconnected', (playerId) => {
  delete localPlayers[playerId];
});

// 画布绘制函数
function drawGame() {
  // 每次绘制前清空画布，避免残留
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 遍历本地所有在线玩家，绘制角色
  Object.values(localPlayers).forEach(player => {
    // 这里替换成你自己的角色绘制逻辑，比如画一个方块
    ctx.fillStyle = '#ff0000';
    ctx.fillRect(player.x, player.y, 40, 40);
  });

  // 循环调用保持动画
  requestAnimationFrame(drawGame);
}

// 启动绘制循环
drawGame();

关键逻辑说明 #

• 服务器端：delete players[socket.id]彻底清除了服务器端的玩家数据，后续同步时不会再包含该玩家；io.emit('player disconnected', socket.id)确保所有客户端都能收到玩家离开的通知。
• 客户端：收到断开通知后删除本地玩家数据，每次绘制画布前清空画布并只渲染当前在线的玩家，这样断开的角色就不会再出现在画布上了。

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