Conecta el cliente con el servidor
Conecta el navegador con el servidor usando eventos de Socket.io
⏱ Estim. ~7 min
01 · Leer
Tienes un servidor que maneja el juego y una página que muestra el tablero. Pero aún no se hablan. La pieza que falta es client.js — el JavaScript que corre en el navegador y traduce entre lo que hacen los jugadores (clics, botones) y lo que el servidor entiende (eventos de Socket.io).
Piensa en client.js como el intérprete de una reunión diplomática. Los jugadores hablan en «clics y botones». El servidor habla en «eventos y datos». El intérprete escucha a ambos lados, traduce los mensajes y se asegura de que todos se entiendan.
Puntos clave
- client.js corre en el navegador, no en el servidor
- Traduce las acciones del usuario (clics) en eventos de Socket.io
- Traduce los eventos del servidor en actualizaciones de UI (mostrar movimientos, mensajes de estado)
- La función io() conecta automáticamente al servidor
02 · Plantilla de prompt
Pídele a Claude que construya el JavaScript del cliente. Sé explícito con cada evento y cada actualización de UI.
Ayúdame a crear un public/client.js para el juego de tic-tac-toe. Requisitos: (1) Usa io() para conectar al servidor — Socket.io se conecta automáticamente al host que sirvió esta página. (2) Cuando se hace clic en 'Find Game', emite 'find-game' y actualiza el estado a 'Searching for opponent...'. (3) Al recibir el evento 'waiting', actualiza el estado a 'Waiting for another player...'. (4) Al recibir 'game-start' (con symbol y roomId), guarda el símbolo del jugador, muestra de quién es el turno y habilita el tablero. (5) Al hacer clic en una celda, emite 'make-move' con el índice de la celda y el roomId — pero solo si es el turno del jugador y la celda está vacía. (6) Al recibir 'move-made', coloca el símbolo correspondiente en la celda, actualiza el estado del turno y habilita o deshabilita los clics según el turno. (7) Al recibir 'game-over', muestra el resultado (ganaste / perdiste / empate), resalta las tres celdas ganadoras si las hay, y muestra el botón Play Again. (8) Al recibir 'opponent-left', muestra 'Opponent disconnected' y muestra el botón Play Again. (9) Al hacer clic en Play Again, resetea el tablero y emite 'find-game' nuevamente.
03 · Ejemplo de código
Cuando Claude termine de generar client.js, busca este patrón central. Así funciona todo cliente de Socket.io.
Patrón cliente de 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() crea la conexión con el servidor. socket.emit() envía eventos. socket.on() escucha eventos. Los nombres de eventos ('find-game', 'game-start', 'move-made') son el contrato entre cliente y servidor — tienen que coincidir al pie de la letra. Este es el mismo flujo de eventos que estudiaste en la lección de planificación.
04 · Leer
El cliente nunca decide si un movimiento es válido. Envía cada clic al servidor y espera la respuesta. Si el servidor dice que el movimiento es válido (emite 'move-made'), el cliente actualiza el tablero. Si el servidor lo ignora, no pasa nada.
Este es el mismo principio de la lección de planificación: el servidor es la autoridad. El cliente solo muestra. Puedes agregar verificaciones del lado del cliente (como deshabilitar clics cuando no es tu turno) para que la UI se sienta más responsiva, pero el servidor sigue validando todo de forma independiente.
Puntos clave
- El cliente envía movimientos al servidor y espera confirmación
- El servidor valida cada movimiento — el cliente nunca decide si es válido
- Las verificaciones en el cliente son solo para UX, no para seguridad
- Los nombres de eventos en client.js deben coincidir letra por letra con lo que espera server.js
05 · Práctica real
Prueba el flujo completo del juego. Este es el momento de la verdad — abre dos pestañas del navegador en la misma URL y juega contra ti mismo.
06 · Completar
La función io() de client.js establece una conexión _____ con el servidor que se mantiene abierta durante toda la sesión de juego.
07 · Quiz
Un jugador hace clic en una casilla en el navegador. ¿Qué pasa después?
- El cliente coloca el símbolo en el tablero al instante y luego avisa al servidor
- El cliente envía una petición HTTP POST al servidor
- El navegador recarga la página para obtener el tablero actualizado
- El cliente emite 'make-move' al servidor y espera a que el servidor emita 'move-made' antes de actualizar el tablero
Otras lecciones de este capítulo
⚠ La experiencia interactiva completa necesita JavaScript. Actívalo y vuelve a cargar la página.
※ Este es un proyecto educativo independiente — no es un producto oficial de Anthropic. Claude™ es una marca registrada de Anthropic, PBC.