javascript - 我的套接字怎么能留在房间里，所以客户端会收到消息

Question

我正在使用 Socket.io 和 Node 在 React 中构建一个小游戏。但是我遇到了一个问题，客户端没有收到任何发送到房间的消息。我在 Node.js 服务器中使用以下代码:
服务器
应用程序.js

  io.on("connection", (socket) => {
    initGame(io, socket);
  });

游戏.js

exports.initGame = function (sio, socket) {
  socket.on("joinGameRoom", joinGameRoom);
  socket.on("logSocket", logSocket);
};

function logSocket() {
  let sock = this;
  console.log(sock.rooms);
}

async function joinGameRoom(data) {
  let sock = this;
  let game = data.game;

  await sock.join(String(game._id));
  await sock.in(String(game._id)).emit("playerJoined", game);
  await sock.emit("game", game);
}

客户
游戏.js

socket.on("playerJoined", (data) => {
  setGame(() => data);
  console.log("player joined!");
});

client/game.js 中的监听器永远不会被调用。当我调用 LogSocket 时，套接字所在的唯一房间；是自己的房间。但其他电话已被调用；像“游戏”这样的电话:
客户
游戏.js

socket.on("game", (data) => {
  setGame(() => data);
  console.log("game Call");
});

所以我的问题是:我在这里做错了什么？为什么我的 socket 会自己离开房间？

Answer 1

所以我的问题与 React 有关。
我在我的 React 客户端中使用 useEffect() 钩子(Hook)中的套接字连接。
这个钩子(Hook)让我的组件在连接调用上重新渲染；这使得组件每次重新渲染都会获得一个新的套接字。所以套接字之前加入的房间仍然存在，但客户端有一个新的套接字。
所以我通过在顶部组件中启动套接字并将其传递给 React.Context 来解决这个问题。