Socket IO | What is the best way to go about assigning clients a character

So right now I have a game that I am making where whenever someone connects, I give their client a number that my server uses to differentiate between the different characters. The characters are objects in an array so a client with an id "0" would be controlling the first object in my array.

However, I am having trouble deciding what to do when the person leaves.

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();
    })

});

How do I go about removing the hero from the heroesOn array whenever the client that is controlling that hero leaves.

via FriedCock