socket.io“连接"刷新/重新加载事件不会触发 [英] socket.io "connect" event on refresh/reload wont fire

问题描述

今天socket.io出现问题.当我刷新页面时，.on("connect"，{})永远不会触发.当我从url加载页面时，所有事件均会触发.如您在下面看到的，我将gameStatus设置为break.在一系列客户端/服务器通信之后，游戏状态应更新为就绪"，并且应在服务器上创建一个新玩家.当我重新加载页面(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');
        }
    }
}

解决方案

经过一番磨合，我发现在刷新页面时，socket.io的公开的"connect"方法在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"
}

Having an issue with socket.io today. When I refresh a page .on("connect", {}) never fires. When I load a page from the url all events fire as they should. As you can see below I set the gameStatus to broken. After a series of client/server communications the game status should update to "ready" and a new player should be created on the server. When I reload the page (cmd+r), none of the client side events fire.

The server side recognizes the new connection "sees" the new socket.id and emits the "send room" event, but the event is not received on the client side.

I tried to force new connection, but I don't know whether or not I am using that correctly.

Last week this worked as I expected, then today without even updating the code, it can't get those events to fire on page refreshes. Everything works as it should if I load the page from the full url (http://localhost:3000 in this case)

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

解决方案

After much gnashing of teeth, I discovered that the exposed "connect" method of socket.io fires before window.onload when a page is refreshed. So my event handlers weren't set up by the time the server emits "connect." If the client misses that first "connect" everything else came apart. I fixed the problem by moving the event handlers out of window.onload.

You might find other solutions, but this was mine:

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"
}

这篇关于socket.io“连接"刷新/重新加载事件不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！