socket.io "connect" event on refresh/reload wont fire

Question

Проблема с socket.io сегодня. Когда я обновляю страницу .on («connect», {}), она никогда не срабатывает. Когда я загружаю страницу с URL-адреса, все события срабатывают, как должны. Как вы можете видеть ниже, я отключил игру. После серии клиент-серверных сообщений статус игры должен обновиться до «ready», и на сервере должен быть создан новый игрок. Когда я перезагружаю страницу (cmd + r), ни одно из событий на стороне клиента не срабатывает.

Серверная сторона распознает новое соединение «видит» новый socket.id и выдает событие «отправить комнату», но событие не получено на стороне клиента.

Я попытался установить новое соединение, но я не знаю, правильно ли я это использую.

На прошлой неделе это работало так, как я ожидал, то сегодня, даже не обновляя код, он не может заставить эти события активировать обновления страницы. Все работает, как должно, если я загрузить страницу с полной URL (http://localhost:3000 в данном случае)

index.html:

var io = io.connect('/', {'force new connection': true}); 

client.js

var gameStatus = 'broken'; 
var localPlayer; 

window.onload = function() { 

    console.log(gameStatus); // "broken" 

    io.on("connect", onSocketConnected); 
    io.on("disconnect", onSocketDisconnect); 
    io.on("new player", onNewPlayer); 
    io.on("send room", function(data){ 
     console.log("send room fired"); // doesn't fire on refresh 
     addPlayer(data); 
    }); 
} 

function onSocketConnected() { 
    console.log("Connected to socket server "); // doesn't connect on refresh 
    // assign socket.sessionid as the player name 
    localPlayer.id = io.socket.sessionid; 
    io.emit("new player", {id: localPlayer.id}); 
    console.log(localPlayer.id); // "undefined" on refresh 
} 

function onSocketDisconnect() { 
    console.log("Disconnected from socket server"); 
} 

function addPlayer(data) { 
    console.log("addPlayer fired"); // doesn't fire on refresh 
    gameStatus = data.roomStatus; 
} 

server.js:

io.sockets.on('connection', function (socket) { 

    socket.on("disconnect", onClientDisconnect); 
    socket.on("new player", onNewPlayer); 

}); 

io.sockets.on("connection", onSocketConnection); 

function onSocketConnection(socket) { 

    console.log("New player has connected: " + socket.id); 
    var lastRoom = rooms.length-1; // simplified for stackoverflow 

    // send the playerType and roomNum to the client 
    io.sockets.in(lastRoom).emit('send room', { roomStatus: "ready" }); 

} 

function onNewPlayer(client) { 

    console.log("new player created!"); // only on first page load 

    var newPlayer = new Player(client.id); 
    players.push(newPlayer); // add player to player array 
} 

function onClientDisconnect(socket) { 

    util.log("Player has disconnected: " + this.id); 
    var disRooms = io.sockets.manager.roomClients[this.id]; 
    for (var room in disRooms) { 
     if (room.length > 0) { // if not the global room '' 
      room = room.replace(/\//g, '') 
      console.log('user exits: '+room); 
      this.broadcast.to(room).emit('player left'); 
     } 
    } 
} 

Answer 1

После большого скрежеща зубов я обнаружил, что обнаженный "connect" метод socket.io срабатывает перед window.onload, когда страница обновляется. Таким образом, мои обработчики событий не были настроены к тому времени, когда сервер испустил "connect.". Если клиент пропустил это первое "connect", все остальное развалилось. Я исправил проблему, переместив обработчики событий из window.onload.

Вы можете найти другие решения, но это было мое:

var gameStatus = 'broken'; 
setEventHandlers(); 
console.log(gameStatus); // "broken" 

window.onload = function() { 
    // other stuff 
} 

function setEventHandlers(){ 
    io.on("connect", onSocketConnected); 
    io.on("disconnect", onSocketDisconnect); 
    io.on("new player", onNewPlayer); 
    io.on("send room", function(data){ 
     console.log("send room fired"); // fires as expected 
     addPlayer(data); 
    }); 
} 

function onSocketConnected() { 
    console.log("Connected to socket server "); // connects before window loads 
    // assign socket.sessionid as the player name 
    localPlayer.id = io.socket.sessionid; 
    io.emit("new player", {id: localPlayer.id}); 
} 

function addPlayer(data) { 
    gameStatus = data.roomStatus; 
    console.log(gameStatus); // "ready" 
}