react.js和websocket.io最终以无限循环而最终

发布于 2025-01-29 17:33:05 字数 1113 浏览 4 评论 0原文

我想为纸牌游戏写游戏大厅。使用react.js，node.js和websocket.io来实现此目的。到目前为止，一切都很好。球员在同一大厅连接。但是我想在大厅STH中打印（玩家1：史蒂文，玩家2：弗兰克，...）。我最终进入了一个无限的循环，从几个小时开始就试图解决。所以也许有人可以帮助我。我猜它一直通过Usestate进行重新渲染，但我不知道如何防止它。

相关服务器代码：

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

原文

i want to write a game Lobby for a card game.
Using React.js, Node.js and Websocket.io for achieving this.
As so far all went fine. Players are connected in the same Lobby.
But i want to print in the Lobby sth Like (Player 1: Steven, Player 2: Frank, ...).
I ended up in an infinite loop, i am trying to solve since hours.
So maybe someone can help me. It keeps re-rendering by useState i guess, but i don't know how to prevent it from.

Relevant Frontend Code:

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]);
    });
  }, []);

Relevant Server Code:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葬﹪忆之殇 2025-02-05 17:33:05

我想说我目前正在经历相同的挑战，寻找解决方案

回复收藏 0 原文

顾挽 2025-02-05 17:33:05

听起来您只想运行socket.emit（“ joined_lobby”，player）;每次'player'。

如果是这样，请将其移至使用效果，然后将其运行，仅在房间或播放器名称更改时才能运行。

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中 - 我不知道该生命周期是如何工作的

Sounds like you only want to run socket.emit("joined_lobby", player); once per 'player'.

If so, move it into a useEffect, and make it so it runs only if the room or player name changes.

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]);

EDIT: you may need to put props.socket in the deps too - I don't know how the lifecycle of that one works

回复收藏 0 原文