quiero escribir un juego Lobby para un juego de cartas. Usando React.js, Node.js y Websocket.io para lograr esto. Como hasta ahora todo ha ido bien. Los jugadores están conectados en el mismo Lobby. Pero quiero imprimir en el Lobby algo como (Jugador 1: Steven, Jugador 2: Frank, ...). Terminé en un bucle infinito, estoy tratando de resolver desde hace horas. Así que tal vez alguien pueda ayudarme. Sigue volviendo a renderizarse por useState, supongo, pero no sé cómo evitarlo.
Código de interfaz relevante:
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]); }); }, []);Código de servidor relevante:
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`); }); });me gustaría decir que actualmente estoy pasando por el mismo desafío, buscando la solución
Parece que solo desea ejecutar socket.emit("joined_lobby", player); una vez por 'jugador'.
Si es así, muévelo a un useEffect y haz que se ejecute solo si cambia la sala o el nombre del jugador.
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 // eg if the room changes socket.emit("left_lobby", player); } },[props.room, props.name]);EDITAR: es posible que también deba poner props.socket en los deps; no sé cómo funciona el ciclo de vida de ese