socket.io”;“连接”;刷新/重新加载时的事件不会激发

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

本文关键字：事件 加载 连接 io 刷新 socket 新加载      更新时间：2024-06-12

今天socket.io出现问题。刷新页面时。on（"connect"，｛｝）从不启动。当我从url加载页面时，所有事件都会按照应有的方式触发。正如你在下面看到的，我将gameStatus设置为breaked。在一系列客户端/服务器通信之后，游戏状态应该更新为"就绪"，并且应该在服务器上创建一个新玩家。当我重新加载页面（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"
}
相关文章：