Tiempo real con Reverb

El kit viene con el tiempo real apagado. Apagado, todo funciona como siempre: las pantallas de complementos preguntan al servidor cada pocos segundos mientras un pago está esperando, y la campana de notificaciones muestra lo que había al cargar la página. El chat de soporte en vivo es la excepción: necesita el tiempo real y no se ofrece sin él. Enciéndelo y esto reacciona en menos de un segundo, sin sondeo:

La decisión es de la aplicación, no de cada pantalla: el tiempo real está encendido cuando la conexión de broadcasting es reverb, y apagado con cualquier otro valor. Esa conexión es BROADCAST_CONNECTION cuando el entorno la escribe, y el valor por defecto del proyecto cuando no (ve Enciéndelo o apágalo). No hay respaldo: si Reverb está encendido y su servidor está caído, nada se rompe, solo que las pantallas dejan de actualizarse solas hasta que vuelva (un pago se confirma igual; la persona lo ve al recargar).

Reverb es un proceso propio que corre en el mismo servidor que la aplicación, así que comparte la memoria y el procesador de ese servidor. Es ligero, pero es una cosa más que mantener viva, y por eso el kit deja la elección a cada producto.

Qué interviene

• Lado del servidor. laravel/reverb es el servidor WebSocket. La transmisión es inmediata (ShouldBroadcastNow), así que no necesita el worker de la cola.
• Lado del navegador. laravel-echo y pusher-js van empaquetados en resources/js/bootstrap.js. El diseño solo le entrega al navegador los datos de conexión cuando la persona inició sesión y el tiempo real está encendido, así que un visitante sin sesión, o cualquier página con el tiempo real apagado, nunca abre una conexión.
• Canales. Tres canales privados, todos autorizados en POST /broadcasting/auth: App.Models.User.{id} (solo ese usuario, declarado en routes/channels.php) lleva notification.received y, para el cliente de un chat en vivo, support-chat.updated; support-chats (quien puede contestar tickets, mientras el chat en vivo está encendido, declarado en routes/channels.php) le lleva support-chat.updated al equipo; billing-account.{id} (solo quien puede administrar esa cuenta de cobro, declarado por Billing Core) lleva billing-account.updated.

Pruébalo en local

1. Asegúrate de tener las dependencias instaladas: composer install y npm install (laravel/reverb, laravel-echo y pusher-js vienen con el kit).

2. Agrega a tu .env local. Los tres valores de la app son cadenas aleatorias que tú eliges; php -r "echo bin2hex(random_bytes(16));" genera una.

   BROADCAST_CONNECTION=reverb
   REVERB_APP_ID=local
   REVERB_APP_KEY=a-random-string
   REVERB_APP_SECRET=another-random-string
   REVERB_HOST=weblabor-base.test
   REVERB_PORT=8080
   REVERB_SCHEME=https
   

   Usa el nombre de tu propio sitio en REVERB_HOST. No corras php artisan reverb:install ni php artisan install:broadcasting: el kit ya está conectado, y ambos comandos reescriben archivos que son suyos.

3. Arranca el servidor nombrando el sitio seguro de Herd o Valet, para que Reverb sirva TLS con su certificado (una página https no puede abrir una conexión ws:// simple):

   php artisan reverb:start --hostname=weblabor-base.test --debug
   

4. php artisan config:clear, luego npm run dev (o npm run build) y recarga la página. Con --debug la terminal imprime cada conexión y cada mensaje.

5. Revisa los dos casos. Compra un complemento con una tarjeta de prueba de Stripe y la confirmación aparece en cuanto llega el webhook (reenvía los webhooks con stripe listen en local), sin peticiones checkSubscriptionStatus ni checkPending repitiéndose en la pestaña de red. Luego haz que le llegue una notificación a alguien, por ejemplo respondiendo su ticket desde otra cuenta, y su campana cambia sin recargar mientras la de otra persona con sesión abierta no.

Enciéndelo o apágalo

Encender: pon BROADCAST_CONNECTION=reverb con los valores REVERB_*, arranca el proceso de Reverb y corre php artisan config:clear (o php artisan optimize si guardas la configuración en caché). Apagar: pon BROADCAST_CONNECTION=null (o quítala, null es el valor por defecto), corre el mismo comando y detén el proceso. No hay que reconstruir nada: el navegador lee los datos de la página, no del paquete de recursos.

BROADCAST_CONNECTION siempre manda cuando el entorno la escribe. Sin ella, la conexión es el valor por defecto del proyecto, una línea al principio de config/broadcasting.php:

$projectDefault = 'null';

El kit la trae en null, así que el tiempo real sigue apagado hasta que un servidor lo enciende. Un producto que lo quiere encendido dondequiera que Reverb esté configurado, por ejemplo para ofrecer el chat de soporte en vivo por defecto, escribe ahí 'reverb'. Entonces cada entorno decide según sus propias credenciales:

El último caso no cae a null en silencio: escribir reverb y olvidar las credenciales es un error de ese entorno, y el mensaje dice qué valores faltan en lugar de fallar en lo profundo del cliente de Pusher. Las pruebas corren siempre con BROADCAST_CONNECTION=null, diga lo que diga tu .env local; una prueba que necesita el tiempo real lo enciende ella misma.

Despliégalo en Ploi

Ploi mantiene vivos los procesos con Supervisor y sirve el sitio con Nginx. Puede correr Reverb por ti, pero no escribe el bloque de Nginx que reenvía el tráfico del WebSocket: esa parte es tuya.

1. Supervisor. Reverb corre como un daemon de Ploi, y los daemons corren bajo Supervisor, así que Supervisor tiene que estar instalado y en marcha en el servidor. Un servidor que ya corre el worker de la cola como daemon de Ploi lo tiene; en uno nuevo, revísalo entre los servicios del servidor antes de agregar el daemon.

2. El proceso de Reverb. En los Daemons del servidor, agrega uno:

   Campo	Valor
   Command	php /home/ploi/your-domain.com/artisan reverb:start --host=127.0.0.1 --port=8080
   User	ploi
   Processes	1

   Escucha solo en el propio servidor, puerto 8080; Nginx es lo único que lo alcanza.

3. Nginx. En Manage del sitio, abre la configuración de Nginx y agrega, dentro del bloque server que escucha en 443, las dos rutas que usa Reverb: /app para las conexiones WebSocket de los navegadores y /apps para que la aplicación publique eventos.

   location /app {
       proxy_http_version 1.1;
       proxy_set_header Host $http_host;
       proxy_set_header Scheme $scheme;
       proxy_set_header SERVER_PORT $server_port;
       proxy_set_header REMOTE_ADDR $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection "Upgrade";
       proxy_pass http://127.0.0.1:8080;
   }
   
   location /apps {
       proxy_http_version 1.1;
       proxy_set_header Host $http_host;
       proxy_set_header Scheme $scheme;
       proxy_set_header SERVER_PORT $server_port;
       proxy_set_header REMOTE_ADDR $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection "Upgrade";
       proxy_pass http://127.0.0.1:8080;
   }
   

   Guárdalo; Ploi prueba y recarga Nginx.

4. Entorno. En el entorno del sitio, con tus propios valores aleatorios:

   BROADCAST_CONNECTION=reverb
   REVERB_APP_ID=your-app-id
   REVERB_APP_KEY=your-app-key
   REVERB_APP_SECRET=your-app-secret
   REVERB_HOST=your-domain.com
   REVERB_PORT=443
   REVERB_SCHEME=https
   

   REVERB_HOST, REVERB_PORT y REVERB_SCHEME son la dirección pública, la que responde Nginx, y la usan tanto los navegadores como la aplicación para publicar. El proceso sigue escuchando en 127.0.0.1:8080.

5. Script de despliegue. Los comandos de siempre ya reconstruyen los recursos de la aplicación (npm ci y npm run build), que es lo que empaqueta Echo; consérvalos. Agrega, después de php artisan queue:restart:

   php artisan reverb:restart
   

   Igual que el worker de la cola, Reverb guarda en memoria el código con el que arrancó, y esto es lo que hace que Supervisor lo vuelva a arrancar con la versión nueva.

Los pasos de Ploi están documentados aquí pero el kit no los prueba. Después del primer despliegue, abre una página con sesión y revisa en la pestaña de red del navegador que la conexión a wss://your-domain.com/app/... se abre con estado 101.