套接字IO |什麼是最好的方式去分配客戶的字符

Question

所以現在我有一個遊戲，我正在做什麼，當有人連接，我給他們的客戶端一個號碼，我的服務器用來區分不同的字符。字符是數組中的對象，因此具有ID「0」的客戶端將控制數組中的第一個對象。

但是，我無法決定該人離開時該做什麼。

server.js

// Setup basic express server 
var express = require('express'); 
var app = express(); 
var server = require('http').createServer(app); 
var io = require('socket.io')(server); 
var port = process.env.PORT || 8082; 

server.listen(port, function() { 
    console.log('Server listening at port %d', port); 
}); 

// Routing 
app.use(express.static(__dirname + '/public')); 

const speed = 5; 
var hero1 = { 
    x : 0, 
    y : 0 
} 
var hero2 = { 
    x : 0, 
    y : 0 
} 
var hero3 = { 
    x : 0, 
    y : 0 
} 
var hero4 = { 
    x : 0, 
    y : 0 
} 
var hero5 = { 
    x : 0, 
    y : 0 
} 
var hero6 = { 
    x : 0, 
    y : 0 
} 
var allHeroes = [hero1, hero2, hero3, hero4, hero5, hero6]; 
var heroesOn = []; 
function sendCoords() { 
    io.sockets.emit("draw", heroesOn) 
} 

io.on('connection', function (socket) { 
    socket.on('disconnect', function(){ 
     console.log(clients) 
    }); 
    var clients = Object.keys(io.sockets.sockets) 
    heroesOn.push(allHeroes[clients.length - 1]); 
    console.log(clients) 
    io.sockets.connected[clients[clients.length - 1]].emit("userId", clients.length - 1); 
    socket.on("move", function(data) { 
     if(heroesOn[data.user].x < 1) { 
      data.a = false; 
     } else if(data.a == true) { 
      heroesOn[data.user].x = heroesOn[data.user].x - speed 
     } 
     if(heroesOn[data.user].y < 1) { 
      data.w = false; 
     } else if(data.w == true) { 
      heroesOn[data.user].y = heroesOn[data.user].y - speed 
     } 
     if(heroesOn[data.user].y > 474) { 
      data.s = false; 
     } else if(data.s == true) { 
      heroesOn[data.user].y = heroesOn[data.user].y + speed 
     } 
     if(heroesOn[data.user].x > 974) { 
      data.d = false; 
     } else if(data.d == true) { 
      heroesOn[data.user].x = heroesOn[data.user].x + speed 
     } 
    }) 
}) 
setInterval(sendCoords, 1000/60) 

client.js

$(function() { 
    var socket = io(); 
    document.onkeydown = down; 
    document.onkeyup = up; 
    var canvas = document.querySelector('#canvas'); 
    var ctx = canvas.getContext('2d'); 
    var character = { 
     user : 0, 
     w : false, 
     a : false, 
     s : false, 
     d : false 
    } 
    socket.on("userId", function(data) { 
     console.log("got id") 
     character.user = data; 
    }) 
    function down(e) { 
     socket.emit("move", character); 
     if(e.keyCode == 87) { 
      character.w = true; 
     } 
     if(e.keyCode == 65) { 
      character.a = true; 
     } 
     if(e.keyCode == 83) { 
      character.s = true; 
     } 
     if(e.keyCode == 68) { 
      character.d = true; 
     } 
    } 
    function up(e) { 
     socket.emit("move", character); 
     if(e.keyCode == 87) { 
      character.w = false; 
     } 
     if(e.keyCode == 65) { 
      character.a = false; 
     } 
     if(e.keyCode == 83) { 
      character.s = false; 
     } 
     if(e.keyCode == 68) { 
      character.d = false; 
     } 
    } 
    setInterval(function() { 

    }, 1000/60) 
    socket.on("draw", function(data) { 
     canvas.width=canvas.width; 
     for(var i = 0; i < data.length; i++) { 
      ctx.rect(data[i].x, data[i].y, 25, 25) 
     } 
     ctx.stroke(); 
    }) 

}); 

如何去每當客戶端是控制該英雄的葉子從heroesOn陣列移除英雄。

Answer 1

我會考慮使用地圖（即對象）而不是數組來跟蹤你的英雄。例如，當客戶端連接：

var heroesOn = {}; // key: socketid, value: hero 
var counter = 0; 
io.on('connection', function (socket) { 
    heroesOn[socket.id] = allHeroes[counter++]; 
    ...continue your code... 
}); 

當一個插座斷開連接：

socket.on('disconnect', function(socket){ 
    delete heroesOn[socket.id]; 
});