_{Documentación del Webhook de WhatsApp Manager |
Ver en GitHub}

📡 Eventos en Tiempo Real

Introducción

El sistema de eventos en tiempo real permite a tu aplicación reaccionar instantáneamente a las interacciones de WhatsApp mediante WebSockets. Con la integración de Laravel Reverb y Laravel Echo, puedes recibir notificaciones instantáneas sobre mensajes entrantes, actualizaciones de estado, eventos de plantillas y más, creando experiencias de usuario altamente interactivas y receptivas.

Beneficios clave:

Notificaciones instantáneas sin necesidad de polling
Actualizaciones de UI en tiempo real
Menor latencia para una mejor experiencia de usuario
Integración perfecta con el ecosistema Laravel
Soporte para canales públicos y privados

📚 Tabla de Contenidos

Configuración de Laravel Reverb
- Instalación
- Configuración del servidor
- Variables de entorno
Configuración de Laravel Echo
- Instalación de dependencias
- Configuración frontend
- Variables de entorno para Vite
Eventos Soportados
- Mensajes
- Estados
- Plantillas
- Interacciones
Escuchando Eventos
- Configuración de canales
- Ejemplos frontend
- Pruebas con Tinker
Mejores Prácticas
- Seguridad en canales
- Manejo de errores
- Optimización de rendimiento

📦 Instalación de Laravel Reverb

1. Instala Laravel Reverb vía Composer

En una nueva terminal, ejecuta el siguiente comando:

composer require laravel/reverb

2. Publica los archivos de configuración de Reverb

php artisan reverb:install

Esto generará el archivo config/reverb.php y ajustará tu broadcasting.php para incluir el driver reverb.

3. Configura tu archivo .env

Agrega o ajusta las siguientes variables:

BROADCAST_CONNECTION=reverb
REVERB_APP_ID=whatsapp-app
REVERB_APP_KEY=whatsapp-key
REVERB_APP_SECRET=whatsapp-secret
REVERB_HOST=127.0.0.1
REVERB_PORT=8080

⚠️ Estos valores deben coincidir con los definidos en config/reverb.php.

4. Configura config/broadcasting.php

Asegúrate de que el driver predeterminado sea reverb:

'default' => env('BROADCAST_CONNECTION', 'null'),

Y dentro del array connections, asegúrate de tener esto:

'reverb' => [
    'driver' => 'reverb',
    'key' => env('REVERB_APP_KEY'),
    'secret' => env('REVERB_APP_SECRET'),
    'app_id' => env('REVERB_APP_ID'),
    'options' => [
        'host' => env('REVERB_HOST'),
        'port' => env('REVERB_PORT', 443),
        'scheme' => env('REVERB_SCHEME', 'https'),
        'useTLS' => env('REVERB_SCHEME', 'https') === 'https',
    ],
    'client_options' => [
        // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
    ],
],

🚀 Levantar el servidor Reverb

En una nueva terminal, ejecuta el siguiente comando:

php artisan reverb:start

Deberías ver algo como:

Reverb server started on 127.0.0.1:8080

El servidor WebSocket quedará activo en 127.0.0.1:8080.

🌐 Configurar Laravel Echo (Frontend)

1. Instala las dependencias de frontend:

Instalar Laravel Echo y PusherJS

npm install --save laravel-echo pusher-js

2. Configura Echo en resources/js/bootstrap.js o donde inicialices tu JS:

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

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 || 8080,
    forceTLS: false,
    enabledTransports: ['ws'],
});

3. Asegúrate de tener las variables necesarias en tu .env frontend (Vite):

VITE_REVERB_APP_KEY=whatsapp-key
VITE_REVERB_HOST=127.0.0.1
VITE_REVERB_PORT=8080

📡 Escuchar eventos (ejemplo en JS)

window.Echo.private('whatsapp-messages')
    .listen('.MessageReceived', (e) => {
        console.log('Nuevo mensaje recibido:', e);
    });

📁 Configuración en el paquete

En tu archivo config/whatsapp.php asegúrate de tener:

return [
    'broadcast_channel_type' => env('WHATSAPP_BROADCAST_TYPE', 'private'),
];

Y en tu .env:

WHATSAPP_BROADCAST_TYPE=private

Recuerde que si decide utilizar canales privados debe utilizar los caneles en routes-channel.php

Broadcast::channel('whatsapp-messages', function ($user) {
    // Puedes personalizar la lógica de acceso aquí
    return $user !== null;
});

🧪 Prueba de Eventos

Puedes emitir manualmente un evento de prueba con:

    php artisan tinker

    event(new \Scriptdevelop\WhatsappManager\Events\MessageReceived([
        'from' => '51987654321',
        'message' => 'Hola desde Reverb'
    ]));

🖥️ Escuchar desde el frontend

Canal Privado

    window.Echo.private('whatsapp-messages')
        .listen('.MessageReceived', (e) => {
            console.log('Nuevo mensaje recibido:', e);
        });

Canal publico

    window.Echo.channel('whatsapp-messages')
        .listen('.MessageReceived', (e) => {
            console.log('Nuevo mensaje recibido:', e);
        });

📡 Eventos del Paquete

El paquete incluye una serie de eventos que se disparan automáticamente en diferentes situaciones. Estos eventos son compatibles con Laravel Echo y Laravel Reverb, lo que permite escuchar y reaccionar a ellos en tiempo real desde el frontend.

Configuración de Eventos

Configurar el tipo de canal de transmisión:
En el archivo whatsapp.php, asegúrate de definir el tipo de canal (public o private):
```
return [
   'broadcast_channel_type' => env('WHATSAPP_BROADCAST_CHANNEL_TYPE', 'private'),
];
```
En tu archivo .env:
```
WHATSAPP_BROADCAST_CHANNEL_TYPE=private
```

Configurar Laravel Echo o Laravel Reverb:

Instala Laravel Echo y PusherJS:

npm install --save laravel-echo pusher-js

Configura Echo en resources/js/bootstrap.js:

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

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 || 8080,
 forceTLS: false,
 enabledTransports: ['ws'],
});

Asegúrate de tener las variables necesarias en tu .env frontend:

VITE_REVERB_APP_KEY=whatsapp-key
VITE_REVERB_HOST=127.0.0.1
VITE_REVERB_PORT=8080

Eventos Disponibles

A continuación, se describen los eventos disponibles en el paquete, cómo se configuran y cómo escucharlos desde el frontend.

Evento	Canal	Alias
BusinessSettingsUpdated	whatsapp.business	business.settings.updated
MessageReceived	whatsapp.messages	message.received
MessageDelivered	whatsapp.status	message.delivered
MessageRead	whatsapp.status	message.read
TemplateCreated	whatsapp.templates	template.created
TemplateApproved	whatsapp.templates	template.approved
TemplateRejected	whatsapp.templates	template.rejected
InteractiveMessageReceived	whatsapp.messages	interactive.received
MediaMessageReceived	whatsapp.messages	media.received