Блог

У меня есть компонент, который показывает, что ни один из игроков не вошел в систему, как только компонент загружается.

 function PlayerList({gamePin}){
const [playerList, setPlayerList] = useState("");
useEffect( ()=>{
    axios.get("http://localhost:8080/game/lobby/" gamePin)
         .then( response =>{
             setPlayerList(response.data)
         })
})
return(
    <div className='container'>
        <div className='lobbycontainer'>
            <h1>Lobby</h1>
            <Grid container spacing={3}>
                {playerList.map(player=>{
                    <Player {PlayerName,PlayerId} />
                })}
            </Grid>
        </div>
    </div>
    )}
 

экспорт списка игроков по умолчанию;

При этом будет отображено имя игрока, который вошел в систему, и всех других игроков, уже вошедших в лобби.

Но мой вопрос в том, как игроки, которые уже вошли в систему, узнают о новых игроках, которые присоединились.

Возможный подход

1. Отправляйте запрос с интервалом каждые 2 секунды.

   setInterval(HttpRequest, 2000);

Это правильный способ сделать это? существуют ли какие-либо альтернативные подходы?

Как компонент динамически обновляет свое состояние на основе изменений в серверной части? и реагируйте на изменения, перенастраивая компонент, чтобы отразить изменения.

Это довольно близко. Используйте шаблон «componentDidMount» useEffect , т. Е. предоставьте пустой массив зависимостей ( [] ). Преобразуйте запрос GET в функцию обратного вызова, вызываемую с интервалом, и не забудьте вернуть функцию очистки эффекта, чтобы очистить интервал, когда этот компонент отключается.

 useEffect(() => {
  const timerId = setInterval(() => {
    axios.get("http://localhost:8080/game/lobby/"   gamePin)
      .then(response => setPlayerList(response.data))
  }, 2000);

  return () => clearInterval(timerId);
}, []);