Javascript HTML5-Socket.IO&；帆布

我正在尝试制作一个小应用程序，多人可以在Socket.IO的帮助下用箭头键移动一个正方形

对于我的后端，我使用的是Sails.JS，而前端则主要是角度

后端：

  var remotePlayers = [];
  var findPlayerById = {};
  var Player;

  function LocalPlayer(x, y, id) {
         this.x = x;
         this.y = y;
         this.id = id;
  }

  socket.on('new player', function(data) {
        // data = user.id;
        socket.id = data;
        LocalPlayer = new LocalPlayer(defaultX,defaultY, socket.id);

        remotePlayers.push(LocalPlayer);

        for (var i = 0; i < remotePlayers.length; i++) {
            findPlayerById[remotePlayers[i].id] = remotePlayers[i];
        };

        Player = findPlayerById[socket.id];
        console.log(Player);
        // Emit to all clients
        sails.sockets.blast('player joined', remotePlayers);
    })

  SocketService.on('player joined', function(data) {
      // data = {x: 50, y:50, id: 'random string'}
      draw(data);
  })

  function draw(data) {
    ctx.clearRect(0, 0, HEIGHT, WIDTH);

    for (var i = 0; i < data.length; i++) {
        // data[i].x = 30
        ctx.fillStyle = 'black';
        ctx.fillRect(data[i].x, data[i].y, 20, 20);
    };
}

然后，在我发出“玩家移动”后，我希望我的客户端绘制并显示玩家的更新位置

 socket.on('move player', function updatePlayerPosition(data) {
        // data = Key and userId
        switch(data.key) {
            case 37:
                // Some checks here then set new value
                Player.x = Player.x - 10;

                sails.sockets.blast('player moved', remotePlayers);
                break;
            case 38:

客户端：

  var remotePlayers = [];
  var findPlayerById = {};
  var Player;

  function LocalPlayer(x, y, id) {
         this.x = x;
         this.y = y;
         this.id = id;
  }

  socket.on('new player', function(data) {
        // data = user.id;
        socket.id = data;
        LocalPlayer = new LocalPlayer(defaultX,defaultY, socket.id);

        remotePlayers.push(LocalPlayer);

        for (var i = 0; i < remotePlayers.length; i++) {
            findPlayerById[remotePlayers[i].id] = remotePlayers[i];
        };

        Player = findPlayerById[socket.id];
        console.log(Player);
        // Emit to all clients
        sails.sockets.blast('player joined', remotePlayers);
    })

  SocketService.on('player joined', function(data) {
      // data = {x: 50, y:50, id: 'random string'}
      draw(data);
  })

  function draw(data) {
    ctx.clearRect(0, 0, HEIGHT, WIDTH);

    for (var i = 0; i < data.length; i++) {
        // data[i].x = 30
        ctx.fillStyle = 'black';
        ctx.fillRect(data[i].x, data[i].y, 20, 20);
    };
}

SocketService.on（'player joined'，函数（数据）{
//数据={x:50，y:50，id:'random string'}
绘制（数据）；
})
函数图（数据）{
ctx.clearRect（0，0，高度，宽度）；
对于（变量i=0；i

问题：当我打开两个浏览器并尝试移动播放器（矩形）时，它总是选择相同的矩形移动。如果我使用一个浏览器，它工作，然后我打开另一个（两个浏览器），两个浏览器将移动第二个浏览器矩形。这有什么意义吗

玩家始终是最后一个加入的客户端。我错过了什么？我对这个很陌生，所以我担心它可能会很多：）需要更多的代码吗？只要问一下，我会补充

非常感谢您的任何建议、想法或链接