Formation Créer un Puissance 4 en ligne : Websocket côté client

Maintenant que notre serveur est capable de gérer les WebSockets on va pouvoir modifier notre hook / contexte pour se synchroniser avec le serveur. Plutôt que de gérer notre machine côté client on va écouter les messages que l'on recevra du serveur pour générer une machine qui correspondra à l'état de notre serveur.

socket.addEventListener('message', (event: MessageEvent) => {
  const message= JSON.parse(event.data)
  if (message.type === 'error' && message.code === ServerErrors.AuthError) {
    logout()
    setPlayerId('')
  } else if (message.type === 'gameUpdate') {
    setMachine(makeGame(message.state, message.context))
  }
})

La méthode send que l'on avait enverra maintenant les évènements au serveur plutôt qu'à la machine.

const send = useCallback<GameContextType["send"]>((event) => {
  socket?.send(JSON.stringify({type: 'gameUpdate', event: {playerId, ...event}}))
}, [playerId])

Et notre méthode can restera inchangée vu qu'elle se base sur le système de machine.