Créez votre propre FPS en WebGL avec socket.io

Default
,

Bonjour, je suis sur le cours pour créer un jeu FPS sur WebGL j'essaie de me servir de socket.io mais pour le moment j'ai cette érreur : socket.io.js:3511 GET http://localhost/socket.io/?EIO=3&transport=polling&t=NGIlqnj 404 (Not Found)

voici mes codes concernés

l'index :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <title>JUST SQUARES</title>
        <meta name="description" content="This game is an Webgl FPS multiplayer game realised for learn Babylonjs!" />
        <!-- SCRIPTS DE BASE -->
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
        <script type="text/javascript" src="./node_modules/socket.io-client/socket.io.js"></script>
        <script>
            var socket = io('http://localhost');
            socket.on('connect', function(){});
            socket.on('event', function(data){});
            socket.on('disconnect', function(){});
          </script>
        <link rel="stylesheet" type="text/css" href="css/mainStyle.css"/>
    </head>
    <body>
        <div id="topHud">
            <div id="eventConnection"></div>
            <div id="leaderBoard">
                <h2>Leaderboard</h2>
                <ul>
                    <li><p><span class="nameLeaderboard" id="player0"></span><span class="scoreLeaderboard" id="scorePlayer0"></span></p></li>
                    <li><p><span class="nameLeaderboard" id="player1"></span><span class="scoreLeaderboard" id="scorePlayer1"></span></p></li>
                    <li><p><span class="nameLeaderboard" id="player2"></span><span class="scoreLeaderboard" id="scorePlayer2"></span></p></li>
                    <li><p><span class="nameLeaderboard" id="player3"></span><span class="scoreLeaderboard" id="scorePlayer3"></span></p></li>
                    <li><p><span class="nameLeaderboard" id="player4"></span><span class="scoreLeaderboard" id="scorePlayer4"></span></p></li>
                </ul>
                <p id="identityGame">You are <span id="gameName"></span>. Kill them all!<p>
            </div>
        </div>

        <div id="bottomHud">
            <div id="statusPlayer">
                <div id="lifeBox">
                    <img src="assets/icons/health.svg">
                    <p><span id="textHealth">0</span> / 100</p>
                </div>
                <div id="armorBox">
                    <img src="assets/icons/armor.svg">
                    <p><span id="textArmor">0</span> / 100</p>
                </div>
            </div>
            <div id="statusAmmo">
                <p id="typeWeapon"></p>
                <div id="ammoBox">
                    <img src="assets/icons/ammos.svg">
                    <p><span id="numberAmmos"></span> / <span id="totalAmmos"></span></p>
                </div>
            </div>
        </div>
        <div id="announcementKill" class="annoucementClose">
            <div id="interiorDiv">
                <p id="textAnouncement"></p>
            </div>
        </div>
        <div id="crossHair"><img  src="assets/icons/target.svg" /></div>
        <canvas id="renderCanvas"></canvas>



    </body>


    <script src="js/Game.js"></script>
    <script src="js/Player.js"></script>
    <script src="js/Arena.js"></script>
    <script src="js/Weapons.js"></script>
    <script src="js/Armory.js"></script>
    <script src="js/GhostPlayer.js"></script>
    <script src="js/NetworkManager.js"></script>
</html>

et le NetworkManager.js :

// ================================================
// DECLARATION SOCKET
var socket = io();
// ================================================



// ================================================
// MAIN
var game;
var myRoom = [];
var personalRoomId = false;
var myConfig = {};
var isPlayerAlreadySet = false;

socket.on('newPlayer',function(dataNewPlayer){
    var room = dataNewPlayer[0];
    var score = dataNewPlayer[1];
    var props = dataNewPlayer[2];
    if(!isPlayerAlreadySet){
        for(var i=0;i<room.length;i++){    
            if(room[i].id == socket.id){
                myConfig = room[i];
                personalRoomId = room[i].id;
                game = new Game('renderCanvas',myConfig,props);
                isPlayerAlreadySet = true;
                document.getElementById('gameName').innerText = room[i].name;
            }
        }
    }
    // game.displayScore(score);

    // // Vérifie les joueurs qui se connectent
    checkIfNewGhost(room);
});
// Vérifie les joueurs qui se déconnectent
socket.on('disconnectPlayer', function(room){
    checkIfGhostDisconnect(room);
 });
// ================================================


// ================================================
// EXTRA FUNCTIONS
var sortRoom = function(room){ // sort the players in room by id
    return room.sort(function(a, b) {
            var nameA = a.id.toUpperCase(); // ignore upper and lowercase
            var nameB = b.id.toUpperCase(); // ignore upper and lowercase
            if (nameA < nameB) {
            return -1;
        }
        if (nameA > nameB) {
            return 1;
        }

        // names must be equal
        return 0;
    });
}
var checkIfNewGhost = function(room){ // check if there is a new ghost in room
    for(var i=0;i<room.length;i++){
        if(room[i].id != personalRoomId){
            var ghostAlreadyExist = false;
            for(var j=0;j<myRoom.length;j++){
                if(room[i].id == myRoom[j].id){
                    ghostAlreadyExist = true;
                    break;
                }
            }
            if(!ghostAlreadyExist){ // if ghost not exist yet in myRoom
                createGhost(room[i],room[i].id);
            }
        }
    }
}
var checkIfGhostDisconnect = function(room){ // check if it miss a ghost in room
    for(var i=0;i<myRoom.length;i++){
        var ghostExist = false;
        for(var j=0;j<room.length;j++){
            if(myRoom[i].id == room[j].id){
                ghostExist = true;
                break;
            }
        }

        if(!ghostExist){ // if ghost not exist yet in myRoom
            deleteGhost(myRoom[i].id,i);
        }
    }
}
var createGhost = function(ghost,id){ // create a new ghost
    myRoom.push(ghost);
    newGhostPlayer = GhostPlayer(game,ghost,id);
    game._PlayerData.ghostPlayers.push(newGhostPlayer);
}
var updateGhost = function(data){ // update all the ghosts with room data
    socket.emit('updateData',[data,personalRoomId]);
}
var deleteGhost = function(index,position){ // delete the ghost by the index
    deleteGameGhost(game,index);
    myRoom.splice(position,1);
    // ICI fonction pour détruire le ghost du jeu
}
var sendGhostRocket = function(position, rotation, direction){
    socket.emit('newRocket',[position, rotation, direction, personalRoomId]);
}
var sendGhostLaser = function(position1, position2){
    socket.emit('newLaser',[position1, position2, personalRoomId]);
}
var sendDamages = function(damage,target){ // update all the ghosts with room data
    socket.emit('distributeDamage',[damage, target, personalRoomId]);
}
var sendPostMortem = function(whoKilledMe){ // update all the ghosts with room data
    if(!whoKilledMe){
        var whoKilledMe = personalRoomId;
    }
    socket.emit('killPlayer',[personalRoomId,whoKilledMe]);
}
var ressurectMe = function(position){ // update all the ghosts with room data
    var dataToSend = [game._PlayerData.sendActualData(),personalRoomId];
    dataToSend[0].ghostCreationNeeded = true;
    socket.emit('updateData',dataToSend);
}

var destroyPropsToServer = function(idServer,type){ // update all the ghosts with room data
    socket.emit('updatePropsRemove',[idServer,type]);
}
// ================================================
 socket.on('requestPosition', function(room){
     var dataToSend = [game._PlayerData.sendActualData(),personalRoomId];
    socket.emit('updateData',dataToSend);
 });

 socket.on ('updatePlayer', function (arrayData) {
     if(arrayData.id != personalRoomId){
         if(arrayData.ghostCreationNeeded){
           var newGhostPlayer = GhostPlayer(game,arrayData,arrayData.id);
             game._PlayerData.ghostPlayers.push(newGhostPlayer);
         }else{
             game._PlayerData.updateLocalGhost(arrayData);
         }
     }
 });

 socket.on ('createGhostRocket', function (arrayData) {
     if(arrayData[3] != personalRoomId){
         game.createGhostRocket(arrayData);
     }
 });

 socket.on ('createGhostLaser', function (arrayData) {
     if(arrayData[2] != personalRoomId){
         game.createGhostLaser(arrayData);
     }
 });

 socket.on ('giveDamage', function (arrayData) {
    if(arrayData[1] == personalRoomId){
        game._PlayerData.getDamage(arrayData[0],arrayData[2]);
     }

 });
 socket.on ('killGhostPlayer', function (arrayData) {
     var idArray = arrayData[0];
     var roomScore = arrayData[1];
     if(idArray[0] != personalRoomId){
        deleteGameGhost(game,idArray[0]);
     }
     if(idArray[1] == personalRoomId){
         //game._PlayerData.newDeadEnnemy(idArray[2]);
     }
     //game.displayScore(roomScore);
});
 socket.on ('ressurectGhostPlayer', function (idPlayer) {
     if(idPlayer != personalRoomId){
         deleteGameGhost(game,idPlayer);
     }
 });
// socket.on ('deleteProps', function (deleteProp) {
//     game._ArenaData.deletePropFromServer(deleteProp)
// });
// socket.on ('recreateProps', function (createdProp) {
//     game._ArenaData.recreatePropFromServer(createdProp)
// });

est ce que par hasard vous pouvez me donnez une piste à suivre merci de votre attention