resources/views/pages/frontend/docs/reverb-websockets.md
Última modificación: 27 Oct, 2026

Laravel Reverb & Servidor WebSockets

Laravel Reverb es el motor de comunicación bidireccional en tiempo real integrado de forma nativa en Mañuti. Desarrollado en PHP sobre un bucle de eventos asíncronos (Event Loop sin bloqueo de I/O), Reverb elimina la dependencia de servicios SaaS de terceros (como Pusher) o entornos Node.js separados (Socket.io), garantizando control perimetral absoluto y soporte para miles de conexiones concurrentes.


1. Topología del Servidor WebSockets

El servidor Reverb opera como un demonio independiente escuchando en el puerto interno 8080. No expone este puerto al exterior directamente; el balanceador de carga o proxy inverso Nginx intercepta las peticiones HTTPS y WSS en el puerto 443 y realiza la terminación TLS antes de derivar el tráfico al demonio.

flowchart TD
    CLIENT["[Cliente / Navegador]"]
    NGINX["[Nginx Reverse Proxy / Load Balancer]"]
    REVERB["[Laravel Reverb Daemon (artisan reverb:start)]"]
    REDIS["[Redis Pub/Sub (Puerto 6379)]"]

    CLIENT -->|"WSS (TLS / Puerto 443)"| NGINX
    NGINX -->|"WS (TCP / Proxy Pass / Puerto Interno 8080)"| REVERB
    
    REDIS -->|"Subscrito vía"| REVERB

2. Configuración de Entorno (.env) & Variables de Escalamiento

El ecosistema desacopla la configuración de enlace interno del servidor respecto a las variables que el cliente web (Vite) consume en el navegador:

# Enlace del Servidor Reverb
BROADCAST_CONNECTION=reverb

REVERB_APP_ID=728491
REVERB_APP_KEY=kr9xqenc91s2vmyyaqv7
REVERB_APP_SECRET=secreto_criptografico_reverb
REVERB_HOST="0.0.0.0"       # Escucha en todas las interfaces del host/nodo
REVERB_PORT=8080
REVERB_SCHEME=http

# Escalado Horizontal mediante Redis Pub/Sub
REVERB_SCALING_ENABLED=true
REVERB_SCALING_CHANNEL=reverb-scaling

# Variables Públicas para el Bundler de Frontend (Vite)
VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="192.168.1.64" # IP/Dominio alcanzable por el navegador
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

3. Demonio Supervisor (/etc/supervisor/conf.d/reverb.conf)

Para garantizar alta disponibilidad (24/7), el proceso es vigilado por Supervisor. Si el binario de PHP colapsa por agotamiento de memoria o excepción de red, Supervisor lo reanima en milisegundos:

[program:reverb]
process_name=%(program_name)s
command=/usr/bin/php /var/www/framedev12/artisan reverb:start --host=0.0.0.0 --port=8080
autostart=true
autorestart=true
user=www-data
redirect_stderr=true
stdout_logfile=/var/www/framedev12/storage/logs/reverb.log
stopwaitsecs=30

Para aplicar cambios y recargar el demonio:

sudo supervisorctl reread
sudo supervisorctl update
sudo supervisorctl restart reverb

4. Configuración del Proxy Reverso en Nginx

Nginx debe elevar la cabecera HTTP estándar a una conexión WebSocket persistente utilizando las directivas Upgrade y Connection:

# /etc/nginx/sites-available/framedev
server {
    listen 80;
    server_name 192.168.1.64;

    # Tráfico Web Convencional (PHP-FPM)
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php8.5-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    # Proxy Reverso para Laravel Reverb
    location /app {
        proxy_pass http://127.0.0.1:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # Evita timeouts en conexiones WebSocket inactivas
        proxy_read_timeout 60s;
        proxy_send_timeout 60s;
    }
}

5. Inicialización del Cliente en Frontend (echo.js)

En el frontend, la conexión se orquesta a través de Laravel Echo utilizando la biblioteca pusher-js como cliente de transporte:

// resources/js/echo.js
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

El objeto window.Echo se compila mediante Vite (npm run build) e interactúa con el Middleware de Encabezados de Seguridad (CSP), el cual autoriza explícitamente orígenes connect-src ws: wss:.


Enlaces Relacionados

Edita este documento en >> reverb-websockets.md
← Volver a la Landing Page