React.js和Websocket.io最终陷入无限循环

46scxncf 于 2022-12-13 发布在 React

关注(0)|答案(3)|浏览(149)

我想写一个纸牌游戏的游戏大厅。使用React.js，Node.js和Websocket.io来实现这个。到目前为止一切都很顺利。玩家都连接在同一个大厅里。但是我想在大厅里打印类似于（玩家1：史蒂文，玩家2：我陷入了一个无限循环，我一直在努力解决这个问题。所以也许有人能帮助我。我猜它一直在用useState重新呈现，但我不知道如何阻止它。
相关前端代码：

const Lobby = (props) => {
  const socket = props.socket;
  const player = {
    room: props.room,
    name: props.name,
  };

  const [playerList, setPlayerList] = useState([]);

  socket.emit("joined_lobby", player);
  console.log(`${playerList}`);

  useEffect(() => {
    socket.on("add_user", (data) => {
      setPlayerList([...playerList, data.name]);
    });
  }, []);

相关服务器代码：

io.on("connection", (socket) => {   console.log(`Player with ID:\[${socket.id}\] Connected`);

  socket.on("join_room", (data) => {
    socket.join(data);
    console.log(`Player with ID:\[${socket.id}\] Joined the room ${data}`);   });

  socket.on("joined_lobby", (data) => {
    socket.to(data.room).emit("add_user", data);   });

  socket.on("disconnect", () => {
    console.log(`Player with ID:\[${socket.id}\] Disonnected`);   }); });

websocket

来源：https://stackoverflow.com/questions/72269969/react-js-and-websocket-io-ends-up-in-infinite-loop

3条答案

按热度按时间

2q5ifsrm1#

我想说的是，我目前正在经历同样的挑战，寻找解决办法

赞(0）回复(0）举报 2022-12-13

9bfwbjaz2#

听起来你只想为每个“玩家”运行一次socket.emit("joined_lobby", player);。
如果是这样，请将其移动到useEffect中，并使其仅在房间或玩家名称更改时运行。

useEffect(() => {
 const player = {
    room: props.room,
    name: props.name,
  };

   socket.emit("joined_lobby", player);
   
  return () => {
    // I invented this - you need a way of dealing with leaving
    // e.g. if the room changes
    socket.emit("left_lobby", player);
  } 
  
},[props.room, props.name]);

编辑：你可能需要把props.socket也放在deps中--我不知道那个的生命周期是如何工作的

赞(0）回复(0）举报 2022-12-13

8aqjt8rx3#

我也得到了同样的错误，你和后2小时的修复错误，我发现我打开了2个帐户聊天，其中一个2我没有刷新，导致它是无限连接

赞(0）回复(0）举报 2022-12-13