162 líneas
3.8 KiB
Markdown
162 líneas
3.8 KiB
Markdown
# WebSocket Server - Configuración
|
|
|
|
## ✅ Problema Resuelto
|
|
|
|
El servidor WebSocket ahora funciona correctamente utilizando un servidor custom de Next.js.
|
|
|
|
## Arquitectura
|
|
|
|
Este proyecto utiliza un **servidor custom de Next.js** (`server.mjs`) que integra:
|
|
- Next.js para el renderizado de páginas
|
|
- Socket.IO para comunicación en tiempo real
|
|
- HTTP server compartido entre ambos
|
|
|
|
### ¿Por qué un servidor custom?
|
|
|
|
Next.js 16 con App Router no soporta nativamente Socket.IO en rutas de API. La solución es crear un servidor HTTP personalizado que:
|
|
|
|
1. Maneja las peticiones HTTP de Next.js
|
|
2. Maneja las conexiones WebSocket de Socket.IO
|
|
3. Comparte el mismo puerto (3000)
|
|
|
|
## Configuración Actual
|
|
|
|
### Archivo: `server.mjs`
|
|
|
|
```javascript
|
|
- Crea servidor HTTP
|
|
- Inicializa Next.js app
|
|
- Configura Socket.IO en el mismo servidor
|
|
- Maneja eventos de juego en tiempo real
|
|
```
|
|
|
|
### Cliente: `lib/store.ts`
|
|
|
|
```typescript
|
|
const socket = io('http://localhost:3000', {
|
|
transports: ['websocket', 'polling'],
|
|
});
|
|
```
|
|
|
|
**Nota:** Ya NO usa `path: '/api/socket'` porque Socket.IO está en la raíz del servidor.
|
|
|
|
## Eventos Socket.IO
|
|
|
|
### Cliente → Servidor
|
|
- `create-room` - Crear nueva sala
|
|
- `join-room` - Unirse a sala
|
|
- `player-ready` - Jugador listo
|
|
- `make-move` - Hacer jugada
|
|
- `draw-tile` - Robar ficha
|
|
- `disconnect` - Desconectar
|
|
|
|
### Servidor → Cliente
|
|
- `room-created` - Sala creada (roomId)
|
|
- `room-joined` - Unido a sala (gameState, playerId)
|
|
- `game-started` - Juego iniciado
|
|
- `game-state-updated` - Estado actualizado
|
|
- `player-joined` - Nuevo jugador
|
|
- `player-left` - Jugador salió
|
|
- `invalid-move` - Jugada inválida
|
|
- `error` - Error general
|
|
|
|
## Comandos
|
|
|
|
```bash
|
|
# Desarrollo (con hot reload)
|
|
npm run dev
|
|
|
|
# Producción
|
|
npm run build
|
|
npm start
|
|
```
|
|
|
|
## Verificar Conexión
|
|
|
|
1. Abre la consola del navegador (F12)
|
|
2. Busca mensajes como:
|
|
- "Connected to socket server"
|
|
- "Client connected: [socket-id]"
|
|
|
|
3. En la terminal del servidor verás:
|
|
- "> Ready on http://localhost:3000"
|
|
- "> Socket.IO server running"
|
|
- "Client connected: [socket-id]"
|
|
|
|
## Troubleshooting
|
|
|
|
### El cliente no conecta
|
|
|
|
**Síntomas:** No ves "Connected to socket server" en la consola
|
|
|
|
**Solución:**
|
|
1. Verifica que el servidor esté corriendo: `npm run dev`
|
|
2. Revisa la consola del servidor para errores
|
|
3. Asegúrate que el puerto 3000 no esté ocupado
|
|
4. Limpia caché del navegador y recarga
|
|
|
|
### Error: "ERR_CONNECTION_REFUSED"
|
|
|
|
**Causa:** El servidor no está corriendo o puerto bloqueado
|
|
|
|
**Solución:**
|
|
```bash
|
|
# Matar proceso en puerto 3000
|
|
lsof -ti:3000 | xargs kill -9
|
|
|
|
# Reiniciar servidor
|
|
npm run dev
|
|
```
|
|
|
|
### Socket.IO no envía eventos
|
|
|
|
**Causa:** El evento no está registrado correctamente
|
|
|
|
**Solución:**
|
|
1. Verifica que el evento exista en `server.mjs`
|
|
2. Revisa que el nombre del evento coincida exactamente
|
|
3. Checa la consola del servidor para errores
|
|
|
|
## Estado Actual
|
|
|
|
✅ **Funcionando correctamente**
|
|
|
|
El servidor WebSocket está:
|
|
- ✅ Corriendo en http://localhost:3000
|
|
- ✅ Aceptando conexiones Socket.IO
|
|
- ✅ Manejando eventos de juego
|
|
- ✅ Sincronizando estado entre jugadores
|
|
- ✅ Soportando múltiples salas
|
|
|
|
## Logs del Servidor
|
|
|
|
Cuando todo funciona correctamente verás:
|
|
|
|
```
|
|
> domino@0.1.0 dev
|
|
> node server.mjs
|
|
|
|
> Ready on http://localhost:3000
|
|
> Socket.IO server running
|
|
Client connected: abc123xyz
|
|
Room created: XYZ789
|
|
Player Player1 joined room XYZ789
|
|
Game started in room: XYZ789
|
|
```
|
|
|
|
## Próximos Pasos
|
|
|
|
Para producción, considera:
|
|
|
|
1. **Variables de entorno** para la URL del servidor
|
|
2. **SSL/TLS** para conexiones seguras (wss://)
|
|
3. **Autenticación** de jugadores
|
|
4. **Rate limiting** para prevenir spam
|
|
5. **Monitoreo** de conexiones activas
|
|
6. **Backup** de salas activas
|
|
7. **Scaling** con Redis para múltiples instancias
|
|
|
|
---
|
|
|
|
**El servidor WebSocket está completamente funcional** 🎉
|