Conectar cliente e servidor
Usar eventos Socket.io para ligar navegador e servidor
⏱ Estim. ~7 min
01 · Ler
Você tem o servidor que cuida do jogo e a página que mostra o tabuleiro. Eles ainda não conversam. A peça que falta é o client.js — o JavaScript que roda no navegador e traduz entre o que o jogador faz (clica em célula, aperta botão) e o que o servidor entende (eventos Socket.io).
Pense no client.js como um intérprete numa reunião diplomática. O jogador fala em "cliques e botões". O servidor fala em "eventos e dados". O intérprete escuta os dois lados, converte as mensagens e garante que todo mundo entenda.
Pontos-chave
- client.js roda no navegador, não no servidor
- Traduz ações do usuário (cliques) em eventos Socket.io
- Traduz eventos do servidor em atualizações de UI (mostrar jogada, mensagens de status)
- A função io() conecta ao servidor automaticamente
02 · Modelo de prompt
Peça ao Claude para construir o JavaScript do lado do cliente. Seja explícito sobre cada evento e atualização de UI.
Me ajuda a criar um public/client.js para o jogo da velha. Requisitos: (1) conecte ao servidor usando io() — o Socket.io conecta automaticamente ao host que serve a página; (2) ao clicar em 'Find Game', emita 'find-game' e atualize o status para 'Searching for opponent...'; (3) ao receber o evento 'waiting', atualize o status para 'Waiting for another player...'; (4) ao receber 'game-start' (com symbol e roomId), registre o símbolo do jogador, mostre o status indicando de quem é a vez e habilite o tabuleiro; (5) ao clicar numa célula, emita 'make-move' com o índice da célula e o roomId — mas só se for a vez do jogador e a célula estiver vazia; (6) ao receber 'move-made', coloque o símbolo correspondente na célula, atualize o status do turno e habilite/desabilite cliques conforme de quem é a vez; (7) ao receber 'game-over', mostre o resultado (vitória / derrota / empate), destaque a linha vencedora se houver e mostre o botão Play Again; (8) ao receber 'opponent-left', mostre 'Opponent disconnected' e exiba o botão Play Again; (9) ao clicar em Play Again, reinicie o tabuleiro e emita 'find-game' novamente.
03 · Exemplo de código
Depois que o Claude gerar o client.js, procure este padrão central. É assim que todo cliente Socket.io funciona.
Padrão de cliente Socket.io
const socket = io();
// Sending events TO the server
socket.emit('find-game');
socket.emit('make-move', { index: 4, roomId: myRoom });
// Receiving events FROM the server
socket.on('game-start', (data) => {
// data.symbol is 'X' or 'O'
// data.roomId identifies this game
});
socket.on('move-made', (data) => {
// data.index, data.symbol
// Update the board cell
});
io() cria a conexão com o servidor. socket.emit() envia eventos. socket.on() escuta eventos. Os nomes dos eventos ('find-game', 'game-start', 'move-made') são o contrato entre cliente e servidor — precisam bater letra a letra. É o mesmo fluxo de eventos que você estudou na lição de planejamento.
04 · Ler
O cliente nunca decide se uma jogada é válida. Ele envia cada clique ao servidor e espera a resposta. Se o servidor disser que a jogada é válida (emite 'move-made'), o cliente atualiza o tabuleiro. Se o servidor ignorar a jogada, nada acontece.
É o mesmo princípio da lição de planejamento: o servidor é a autoridade. O cliente é só a tela. Você pode adicionar verificações no cliente (como desabilitar cliques quando não é sua vez) para a UI parecer responsiva, mas o servidor ainda valida tudo de forma independente.
Pontos-chave
- O cliente envia a jogada ao servidor e espera confirmação
- O servidor valida cada jogada — o cliente nunca decide se é válida
- Verificações no cliente servem só para UX, não para segurança
- Os nomes de evento no client.js precisam bater letra a letra com os que o server.js espera
05 · Prática real
Teste o fluxo completo do jogo. Hora da verdade — abra duas abas do navegador na mesma URL e jogue contra si mesmo.
06 · Preencher
A função io() do client.js abre uma conexão _____ com o servidor, que fica aberta durante toda a sessão de jogo.
07 · Quiz
Um jogador clica numa célula no navegador. O que acontece em seguida?
- O cliente coloca o símbolo no tabuleiro na hora e depois avisa o servidor
- O cliente envia uma requisição HTTP POST ao servidor
- O navegador recarrega a página para pegar o tabuleiro atualizado
- O cliente emite 'make-move' ao servidor e só atualiza o tabuleiro quando o servidor emite 'move-made'
Outras lições deste capítulo
⚠ A experiência interativa completa precisa de JavaScript. Ative-o e recarregue a página.
※ Este é um projeto educacional independente — não é um produto oficial da Anthropic. Claude™ é uma marca registrada da Anthropic, PBC.