Configura el proyecto
Inicializa el proyecto e instala Socket.io con Claude Code
⏱ Estim. ~8 min
01 · Leer
Hora de construir. Empezamos como con todo proyecto de Node.js: crear una carpeta, inicializar npm e instalar dependencias. Ya lo hiciste en el Nivel 7.
Lo nuevo es Socket.io — una librería que hace que WebSocket sea fácil de usar. Se encarga del upgrade de la conexión, las reconexiones y la serialización de mensajes, para que te enfoques en la lógica del juego y no en la red de bajo nivel.
También vas a usar Express para servir los archivos HTML del juego. Express y Socket.io trabajan juntos: Express sirve las páginas y Socket.io maneja la comunicación en tiempo real.
Puntos clave
- Socket.io es una librería que simplifica la comunicación por WebSocket
- Express sirve archivos HTML/CSS/JS al navegador
- Socket.io maneja los eventos en tiempo real entre cliente y servidor
- Ambos corren en el mismo servidor — Express sirve archivos, Socket.io maneja eventos
02 · Práctica real
Crea la carpeta del proyecto e instala las dependencias. Ejecuta estos comandos en tu terminal.
03 · Plantilla de prompt
Pídele a Claude Code que construya el servidor. Dale una descripción concreta de lo que quieres — no solo «hazme un servidor», sino qué debe hacer exactamente.
Ayúdame a crear un archivo server.js que sirva como servidor del juego de tic-tac-toe. Usa Express para servir archivos estáticos desde el directorio public/ e integra Socket.io para manejar la comunicación en tiempo real. Cuando un cliente se conecte, imprime 'Player connected' con el socket ID; cuando se desconecte, imprime 'Player disconnected' con el socket ID. Escucha en la variable de entorno PORT, con fallback al puerto 3000 si no existe.
04 · Ejemplo de código
Cuando Claude termine de generar server.js, busca este patrón clave. Socket.io no se puede conectar directo a la app de Express — necesita el objeto HTTP server crudo.
Patrón de integración Express + Socket.io
const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');
const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer);
app.use(express.static('public'));
io.on('connection', (socket) => {
console.log('Player connected:', socket.id);
socket.on('disconnect', () => {
console.log('Player disconnected:', socket.id);
});
});
httpServer.listen(process.env.PORT || 3000);
Fíjate en las tres capas: Express (app) maneja las peticiones HTTP y sirve archivos. El HTTP server (httpServer) envuelve a Express. Socket.io (io) envuelve al HTTP server para interceptar las peticiones de upgrade a WebSocket. Por eso Socket.io necesita el HTTP server crudo: tiene que capturar el header 'Upgrade: websocket' antes de que Express lo vea.
05 · Práctica real
Crea una página de prueba mínima para verificar que la conexión funciona.
06 · Completar
Socket.io necesita el objeto HTTP _____ crudo, no solo la app de Express, porque tiene que manejar el handshake de upgrade a WebSocket.
07 · Quiz
¿Qué agrega npm install express socket.io a tu proyecto?
- Dos lenguajes de programación para construir juegos
- Una base de datos y una capa de caché
- Un framework de frontend y una librería de CSS
- Un framework web (Express) y una librería de comunicación en tiempo real (Socket.io)
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.