Crear y ejecutar un proyecto de Socket.io con ServBay

Socket.io es una popular librería de JavaScript diseñada para desarrollar aplicaciones web en tiempo real, bidireccionales y basadas en eventos. Se basa en el protocolo WebSocket y proporciona mecanismos alternativos (como long-polling) para garantizar una comunicación en tiempo real estable y confiable bajo distintos clientes y condiciones de red.

En esta guía aprenderás cómo aprovechar el potente entorno de desarrollo local de ServBay para crear, ejecutar y gestionar un proyecto Socket.io. ServBay ofrece un entorno Node.js preconfigurado y una gestión de sitios web (antes llamados hosts) sencilla, facilitando el desarrollo con Socket.io.

¿Qué es Socket.io?

Socket.io permite la comunicación en tiempo real y bidireccional, basada en eventos. Se compone de dos partes:

1. Una librería backend que se ejecuta en un servidor Node.js.
2. Una librería JavaScript para el cliente que corre en el navegador.

Aunque su objetivo principal es utilizar WebSocket, Socket.io asegura la compatibilidad en navegadores antiguos o en redes restringidas gracias a la detección automática y el fallback a otros mecanismos de transporte (como Adobe Flash Socket, Ajax Long Polling, Ajax Multipart Streaming, Forever IFrame, JSONP Polling, entre otros).

Características y ventajas clave de Socket.io

• Comunicación en tiempo real: Permite el intercambio instantáneo de datos entre servidor y cliente. Ideal para chats, herramientas de colaboración, tableros en tiempo real, videojuegos online, etc.
• Compatibilidad multiplataforma: Funciona en navegadores web, aplicaciones móviles y entornos de servidor Node.js.
• Reconexión automática: El cliente intenta reconectar automáticamente si se pierde la conexión, mejorando la robustez de la aplicación.
• Modelo basado en eventos: Su enfoque dirigido a eventos hace que trabajar con comunicación asíncrona sea intuitivo y gestionable.
• Salas y namespaces: Permite agrupar clientes en “salas” para difundir mensajes a grupos específicos; los “namespaces” reutilizan recursos y permiten multiplexar varias conexiones en una misma.
• Soporte para datos binarios: Facilita el envío y recepción de datos binarios.
• Alta compatibilidad: Ofrece fiabilidad usando diversos métodos de transporte en cualquier condición de red.

Con Socket.io los desarrolladores pueden concentrarse en la lógica de negocio, sin preocuparse por los detalles técnicos de la comunicación en tiempo real.

Crear y ejecutar un proyecto de Socket.io en ServBay

ServBay ofrece un entorno listo para usar ideal para desarrolladores Node.js, que incluye el runtime de Node.js, el gestor de paquetes npm y herramientas para la gestión ágil de sitios web. Vamos a aprovechar estas herramientas para configurar y ejecutar un ejemplo de proyecto con Socket.io.

Requisitos previos

Antes de comenzar, asegúrate de lo siguiente:

1. Instalar ServBay: Descarga e instala la versión más reciente desde el sitio oficial de ServBay.
2. Instalar el paquete Node.js en ServBay: Asegúrate de haber instalado Node.js desde el panel de control de ServBay, en la sección “Paquetes” (antes “Servicios”). Consulta la documentación Usar Node.js en ServBay para más detalles.

Crear un proyecto de ejemplo con Socket.io

Vamos a crear una pequeña aplicación de chat como ejemplo.

1. Inicializar el directorio del proyecto:

   Abre tu terminal. ServBay recomienda almacenar los sitios web en /Applications/ServBay/www. Navega hasta esa carpeta, crea tu proyecto, inicialízalo e instala las dependencias necesarias:

   cd /Applications/ServBay/www
   mkdir servbay-socketio-chat
   cd servbay-socketio-chat
   npm init -y
   npm install express socket.io

   Esto creará un archivo package.json en la carpeta servbay-socketio-chat e instalará los paquetes express (para servir archivos estáticos y gestionar conexiones HTTP) y socket.io (librería principal de servidor y cliente).

2. Crear el archivo del servidor (server.js):

   En la raíz de tu proyecto servbay-socketio-chat, crea un archivo llamado server.js y copia el siguiente código. Este script iniciará el servidor HTTP, integrará Socket.io y gestionará eventos de conexión y mensajes.

   const express = require('express');
   const http = require('http');
   const socketIo = require('socket.io');
   const path = require('path'); // Importar el módulo path
   
   const app = express();
   // Crear un servidor HTTP basado en la app de express
   const server = http.createServer(app);
   // Adjuntar Socket.io al servidor HTTP
   const io = socketIo(server);
   
   // Configurar el directorio de archivos estáticos, apuntando al directorio actual
   app.use(express.static(__dirname));
   
   // Gestionar solicitudes GET a la raíz, enviando index.html
   app.get('/', (req, res) => {
     // Usar path.join para asegurar rutas correctas en diferentes sistemas operativos
     res.sendFile(path.join(__dirname, 'index.html'));
   });
   
   // Escuchar eventos de conexión de Socket.io
   io.on('connection', (socket) => {
     console.log('a user connected'); // Imprimir log cuando un usuario se conecta
   
     // Escuchar el evento de desconexión
     socket.on('disconnect', () => {
       console.log('user disconnected'); // Log cuando un usuario se desconecta
     });
   
     // Escuchar eventos 'chat message'
     socket.on('chat message', (msg) => {
       console.log('message: ' + msg); // Imprimir mensaje recibido
       // Difundir el mensaje a todos los clientes conectados
       io.emit('chat message', msg);
     });
   });
   
   // Obtener el puerto desde la variable de entorno o usar el valor por defecto
   const port = process.env.PORT || 3000;
   server.listen(port, () => {
     console.log(`Server running on port ${port}`);
     console.log(`Access it via http://localhost:${port} (direct) or via ServBay reverse proxy`);
   });

   Explicación del código:

   • Usamos express para crear un servidor web sencillo que sirva el archivo index.html.
   • http.createServer(app) inicia un servidor HTTP estándar, sobre el que se monta Socket.io.
   • socketIo(server) inicializa Socket.io y lo enlaza con el servidor HTTP.
   • io.on('connection', ...) escucha nuevas conexiones de clientes.
   • socket.on('disconnect', ...) escucha desconexiones de clientes.
   • socket.on('chat message', ...) escucha eventos llamados 'chat message' que contienen los mensajes enviados.
   • io.emit('chat message', msg) reenvía los mensajes recibidos a todos los clientes conectados.

3. Crear el archivo del cliente (index.html):

   En la raíz del proyecto, crea un archivo index.html y copia el siguiente código. Este fichero contiene el HTML, los estilos y el JavaScript necesario para conectar con el servidor y administrar mensajes.

   <!DOCTYPE html>
   <html>
   <head>
     <title>ServBay Socket.io Chat</title>
     <style>
       body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
       #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
       #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
       #input:focus { outline: none; }
       #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
       #messages { list-style-type: none; margin: 0; padding: 0; }
       #messages > li { padding: 0.5rem 1rem; }
       #messages > li:nth-child(odd) { background: #efefef; }
       .servbay-banner {
         background-color: #007bff; /* Azul de ServBay */
         color: white;
         text-align: center;
         padding: 15px 0;
         font-size: 22px;
         margin-bottom: 20px;
         font-weight: bold;
       }
     </style>
   </head>
   <body>
     <div class="servbay-banner">¡Bienvenido a la demo de chat ServBay Socket.io!</div>
     <ul id="messages"></ul>
     <form id="form" action="">
       <input id="input" autocomplete="off" /><button type="submit">Enviar</button>
     </form>
   
     <!-- Incluir la librería cliente de Socket.io -->
     <!-- Este archivo lo proporciona dinámicamente el servidor de Socket.io en tiempo de ejecución -->
     <script src="/socket.io/socket.io.js"></script>
     <script>
       // Conectarse al servidor de Socket.io
       // Si el cliente y el servidor están en el mismo dominio y puerto, io() conecta automáticamente
       var socket = io();
   
       var form = document.getElementById('form');
       var input = document.getElementById('input');
       var messages = document.getElementById('messages'); // Obtener el elemento de mensajes
   
       form.addEventListener('submit', function(e) {
         e.preventDefault(); // Prevenir el comportamiento predeterminado del formulario
         if (input.value) {
           // Enviar el evento 'chat message' y el contenido al servidor
           socket.emit('chat message', input.value);
           input.value = ''; // Limpiar el campo de entrada
         }
       });
   
       // Escuchar evento 'chat message' enviado por el servidor
       socket.on('chat message', function(msg) {
         // Crear un nuevo elemento de lista para mostrar el mensaje
         var item = document.createElement('li');
         item.textContent = msg; // Usar textContent para prevenir ataques XSS
         messages.appendChild(item); // Añadir el mensaje a la lista
         // Hacer scroll hasta el último mensaje
         window.scrollTo(0, document.body.scrollHeight);
       });
     </script>
   </body>
   </html>

   Explicación del código:

   • La página contiene una estructura HTML simple, estilos en CSS (incluyendo un banner azul con branding de ServBay), una lista de mensajes (ul#messages) y un formulario para enviar mensajes (form#form).
   • <script src="/socket.io/socket.io.js"></script> importa la librería cliente de Socket.io, que es servida automáticamente al iniciar el servidor.
   • io() inicializa y conecta el cliente al servidor Socket.io.
   • El cliente escucha el evento submit del formulario, previene su acción por defecto y usa socket.emit('chat message', input.value) para enviar mensajes.
   • Los mensajes que envía el servidor mediante el evento 'chat message' son añadidos a la interfaz en tiempo real.

Con esto, tu ejemplo básico con Socket.io ya está listo para ejecutarse y probarse con ServBay. Ahora veremos cómo ejecutarlo y acceder a él mediante ServBay.

Ejecutar el proyecto desde ServBay (modo desarrollo)

En desarrollo, normalmente se ejecuta directamente el servidor Node.js, usando el proxy inverso de ServBay para exponerlo bajo un dominio local.

1. Ejecutar el servidor en modo desarrollo:

   Abre la terminal, navega a tu proyecto en /Applications/ServBay/www/servbay-socketio-chat y ejecuta el servidor, especificando el puerto 8585 (puedes elegir otro):

   cd /Applications/ServBay/www/servbay-socketio-chat
   PORT=8585 node server.js

   Cuando veas el mensaje Server running on port 8585 en la terminal, significa que el servidor está activo en el puerto 8585 localmente.

2. Configurar un sitio web (proxy inverso) en ServBay:

   Para acceder por dominio local y aprovechar HTTPS/SSL de ServBay:

   • Abre el panel de control de ServBay.
   • Ve a la sección “Sitios web” (antes llamada “Hosts”).
   • Haz clic en “Agregar nuevo sitio web”.
   • Configura lo siguiente:
     • Nombre: ServBay Socket.io Dev (o el que prefieras)
     • Dominios: servbay-socketio-dev.servbay.demo (u otro dominio bajo .servbay.demo)
     • Tipo de sitio: Selecciona Proxy inverso (Reverse Proxy)
     • Destino del proxy: http://127.0.0.1:8585 (apunta al puerto local donde corre tu servidor Node.js)
   • Guarda la configuración. ServBay aplicará los cambios automáticamente y puede que deba reiniciar los servidores web pertinentes (como Caddy o Nginx, según tu configuración).

   Nota: Un proxy inverso es fundamental para Socket.io, ya que, además de reenviar peticiones HTTP normales, también gestiona correctamente los upgrades de protocolo para WebSocket. Tanto Caddy como Nginx preconfigurados en ServBay admiten WebSocket de forma nativa.

   Consulta los pasos detallados en Agregar un sitio de desarrollo Node.js. Además, puedes activar HTTPS en tu dominio local a través de ServBay; consulta Proteger tu sitio con SSL/TLS. ServBay User CA y ServBay Public CA pueden generar y gestionar certificados HTTPS locales.

3. Acceder al sitio en modo desarrollo:

   Abre en tu navegador el dominio local que configuraste, por ejemplo https://servbay-socketio-dev.servbay.demo. Verás la interfaz del chat y podrás probar la comunicación en tiempo real desde varias pestañas o dispositivos.

Desplegar el proyecto desde ServBay (modo producción)

En producción, es recomendable usar un gestor de procesos (como PM2 o forever) para asegurar la robustez de tu aplicación Node.js y orquestar su integración con ServBay. A continuación, suponemos que la app de Node.js ya corre estable en un puerto específico.

1. Ejecutar el servidor en producción:

   Generalmente se utiliza un gestor de procesos para mantener la aplicación viva y reiniciar si hay fallos (ejemplo con PM2):

   # Si no tienes PM2 instalado
   # npm install pm2 -g
   
   cd /Applications/ServBay/www/servbay-socketio-chat
   PORT=8586 NODE_ENV=production pm2 start server.js --name servbay-socketio-prod

   PM2 arrancará server.js en el puerto 8586 y con la variable de entorno NODE_ENV en modo producción, garantizando que el proceso se mantenga activo.

2. Configurar el sitio web de producción (proxy inverso) en ServBay:

   Repite los pasos de configuración, pero apunta el proxy inverso al puerto correspondiente de producción.

   • Abre el panel de ServBay.
   • Ve a la sección “Sitios web”.
   • Haz clic en agregar un nuevo sitio.
   • Configura:
     • Nombre: ServBay Socket.io Prod (o el que gustes)
     • Dominios: servbay-socketio-prod.servbay.demo (u otro bajo .servbay.demo)
     • Tipo de sitio: Proxy inverso (Reverse Proxy)
     • Destino del proxy: http://127.0.0.1:8586 (apunta al puerto de Node.js en producción)
   • Guarda y aplica los cambios.

3. Acceder al sitio en modo producción:

   Visita en tu navegador el dominio de producción, por ejemplo https://servbay-socketio-prod.servbay.demo.

El proxy inverso de ServBay te permite gestionar cómodamente múltiples aplicaciones Node.js, tanto en desarrollo como producción, asociarles dominios locales y certificados SSL, sin necesidad de editar archivos hosts del sistema ni configurar complejos archivos de servidores web.

Conectar con bases de datos proporcionadas por ServBay

ServBay es compatible con varios motores de bases de datos, como MySQL, MariaDB, PostgreSQL, MongoDB y Redis. Tu aplicación Socket.io podría requerir de estos servicios para almacenar usuarios, historial de mensajes, etc. Aquí tienes ejemplos de código para conectar Node.js con cada una.

Importante: Antes de ejecutar estos códigos, asegúrate de instalar y arrancar el paquete de base de datos correspondiente desde el panel de ServBay. Los datos de conexión (puerto, usuario, contraseña por defecto) se obtienen desde la interfaz de ServBay o su documentación. Para MySQL/MariaDB el usuario root y su contraseña suelen ser los que estableciste al instalar ServBay. Puedes restablecerla desde el panel si la olvidas.

1. Conectar a MongoDB:

   Instala Mongoose ODM (o el driver oficial mongodb):

   npm install mongoose

   Agrega en tu código Node.js (por ejemplo en server.js o en un módulo aparte):

   const mongoose = require('mongoose');
   
   // Por defecto conecta a la instancia local de MongoDB (puerto 27017)
   // Nombre de base de datos de ejemplo: servbay_socketio_app
   mongoose.connect('mongodb://localhost:27017/servbay_socketio_app', {
     useNewUrlParser: true,
     useUnifiedTopology: true,
     // Otros parámetros como user, pass si requieres autenticación
     // user: 'tu_usuario_mongo',
     // pass: 'tu_contraseña_mongo'
   })
   .then(() => console.log('MongoDB connected successfully via Mongoose'))
   .catch(err => console.error('MongoDB connection error:', err));
   
   // Ya puedes usar mongoose.model() para definir schemas y modelos
   // ...

2. Conectar a Redis:

   Instala el cliente redis:

   npm install redis

   Añade esta lógica en tu archivo Node.js:

   const redis = require('redis');
   
   // Crear instancia de cliente Redis, por defecto en localhost:6379
   const client = redis.createClient({
     // Si Redis requiere autenticación
     // password: 'tu_contraseña_redis',
     // url: 'redis://localhost:6379' // O usa el formato URL
   });
   
   client.on('error', (err) => {
     console.error('Redis connection error:', err);
   });
   
   client.on('connect', () => {
     console.log('Redis client connected successfully');
   });
   
   // Conectar al servidor Redis
   client.connect(); // Para versiones v4+ es obligatorio llamar a connect()
   
   // Ya puedes usar client para ejecutar comandos Redis
   // Ejemplo: await client.set('mykey', 'myvalue');
   // ...

3. Conectar a MariaDB / MySQL:

   ServBay soporta tanto MariaDB como MySQL. Puedes usar la librería mariadb (compatible con ambos):

   Instala el cliente:

   npm install mariadb

   Agrega esta lógica de conexión:

   const mariadb = require('mariadb');
   
   // Crear un pool de conexiones
   const pool = mariadb.createPool({
     host: 'localhost',
     port: 3306, // Puerto por defecto de MariaDB/MySQL
     user: 'root', // Usuario root por defecto en ServBay
     password: 'tu_contraseña', // Usa la contraseña que configuraste en ServBay para root
     database: 'servbay_socketio_app', // Nombre de la base de datos de ejemplo
     connectionLimit: 5 // Tamaño del pool
   });
   
   // Obtener conexión del pool y probar
   pool.getConnection()
     .then(conn => {
       console.log("Connected to MariaDB/MySQL successfully");
       conn.release(); // Liberar la conexión
       // Ahora puedes usar pool para ejecutar consultas
       // Ejemplo: await pool.query("SELECT 1");
       // ...
     })
     .catch(err => {
       console.error("MariaDB/MySQL connection error:", err);
     });

   Nota: Sustituye password por la real configurada en ServBay para el usuario root. Es recomendable crear un usuario dedicado para la app y no usar root en producción.

4. Conectar a PostgreSQL:

   Instala el cliente pg:

   npm install pg

   Incorpora el siguiente snippet:

   const { Pool } = require('pg');
   
   // Crear pool de conexiones
   const pool = new Pool({
     user: 'user', // Usuario por defecto de PostgreSQL
     host: 'localhost',
     database: 'servbay_socketio_app', // Nombre de la base de datos de ejemplo
     password: 'tu_contraseña', // Usa la contraseña de PostgreSQL configurada en ServBay
     port: 5432, // Puerto por defecto de PostgreSQL
   });
   
   // Probar la conexión
   pool.connect((err, client, done) => {
     if (err) {
       console.error('PostgreSQL connection error:', err);
       return;
     }
     console.log('Connected to PostgreSQL successfully');
     client.release(); // Liberar la conexión
     // Ya puedes usar pool para hacer consultas
     // Ejemplo: pool.query('SELECT NOW()', (err, res) => { ... });
     // ...
   });

   Nota: Reemplaza user y password por el usuario y la contraseña reales de PostgreSQL en ServBay.

Al integrar bases de datos, tu app con Socket.io podrá almacenar datos persistentes y ofrecer funcionalidades avanzadas. ServBay hace muy sencillo levantar un entorno local completo con Node.js y los motores de base de datos que necesites.

Consideraciones

• Conflicto de puertos: Asegúrate de que el puerto usado por tu app Node.js (por ejemplo, 8585 o 8586) no esté ocupado por otra aplicación. Cambia el valor de la variable de entorno PORT si es necesario.
• Configuración de sitios en ServBay: Tras configurar proxies inversos en ServBay, verifica que el servidor web (Caddy, Nginx) haya reiniciado correctamente y aplicado la configuración.
• Proxy de WebSockets: El proxy inverso de ServBay soporta WebSockets por defecto. Si tienes problemas de conexión, revisa los logs o la configuración de Caddy/Nginx para confirmar que WebSocket esté correctamente habilitado.
• Firewall: Verifica que el firewall del sistema no bloquee los puertos de ServBay (por ejemplo, 80, 443) ni los puertos de Node.js.

Preguntas frecuentes