🚀 Taller: WebSockets con Socket.IO / Solución

Nico Toro

Aprende a implementar comunicación en tiempo real construyendo un chat desde cero

🎯 Objetivo del Taller

El objetivo de este taller es que aprendas a implementar WebSockets utilizando Socket.IO para crear comunicación bidireccional en tiempo real entre un servidor y múltiples clientes.

La idea es que construyas el chat por tu cuenta, investigando y utilizando los recursos disponibles en internet (documentación de Socket.IO, tutoriales, etc.). Los archivos de inicio tienen comentarios guía con los pasos a seguir, pero tú debes escribir el código.

💡 Tip: La documentación oficial de Socket.IO es tu mejor amigo: https://socket.io/docs/v4/

📁 Estructura del Proyecto

websocket-taller/
├── start/              # 👈 Aquí trabajas tú
│   ├── client/         # Frontend React + Vite
│   └── server/         # Backend Express + Socket.IO
│
└── final/              # ✅ Solución completa (solo si te atascas)
    ├── client/
    └── server/

• start/: Contiene el código base con TODOs y pistas para que implementes la funcionalidad de WebSockets.
• final/: Contiene la solución completa. Úsala solo como referencia si te quedas muy atascado.

🛠️ Requisitos

Antes de comenzar, asegúrate de tener instalado:

• Node.js - Versión 22 o superior
• npm - Viene incluido con Node.js

Para verificar tu versión de Node:

node --version  # Debe ser v22.x.x o superior

🚀 Instalación y Ejecución

1. Clonar el repositorio

git clone https://github.com/Andr3xDev/websocket-taller.git
cd websocket-taller

2. Instalar dependencias

Debes instalar las dependencias tanto del cliente como del servidor:

# Instalar dependencias del servidor
cd start/server
npm install

# Instalar dependencias del cliente
cd ../client
npm install

3. Ejecutar el proyecto

Necesitas dos terminales para correr el proyecto:

Terminal 1 - Servidor:

cd start/server
npm run dev

El servidor correrá en: http://localhost:3050

Terminal 2 - Cliente:

cd start/client
npm run dev

El cliente correrá en: http://localhost:5175

📝 ¿Qué debes implementar?

En el Servidor (start/server/src/index.ts)

1. Importar e inicializar Socket.IO
2. Manejar el evento connection para nuevas conexiones
3. Escuchar eventos: join, chat-message, disconnect
4. Emitir eventos: message, user-joined, user-left

En el Cliente (start/client/src/App.tsx)

1. Importar y conectar a Socket.IO
2. Escuchar eventos: message, user-joined, user-left
3. Emitir eventos: join, chat-message
4. Manejar la desconexión al desmontar el componente

📚 Recursos Útiles

• 📖 Documentación oficial de Socket.IO
• 🎥 Socket.IO en 100 segundos (Video)
• 📝 Guía de inicio rápido
• 🔧 API del servidor
• 🔧 API del cliente

✅ Resultado Esperado

Cuando completes el taller, tendrás un chat funcional donde:

• ✨ Múltiples usuarios pueden conectarse simultáneamente
• 💬 Los mensajes se envían y reciben en tiempo real
• 👋 Se notifica cuando alguien entra o sale del chat
• 🔄 La comunicación es bidireccional (cliente ↔ servidor)

🆘 ¿Atascado?

1. Lee los comentarios TODO en los archivos - tienen pistas útiles
2. Consulta la documentación de Socket.IO
3. Revisa la carpeta final/ si necesitas ver la solución

---

Byte Semillero 🚀