LARAVEL ECHO

Laravel Echo es una librería JavaScript oficial creada por el equipo de Laravel que facilita muchísimo la implementación de funcionalidades en tiempo real en el frontend de tus aplicaciones Laravel. En palabras simples: Mientras que en el backend de Laravel se emiten (broadcast) eventos a través de WebSockets (usando drivers como Laravel Reverb, Pusher o Ably), Laravel Echo es el "cliente" en JavaScript que se encarga de:
  • Conectarse al servidor de WebSockets.
  • Suscribirse a canales (public, private, presence).
  • Escuchar eventos en tiempo real.
  • Recibirlos y reaccionar inmediatamente en la interfaz (sin refrescar la página).
En pocas palabras Laravel Echo:
  • ¿Qué es? → Librería JS para el frontend
  • ¿Para qué? → Escuchar eventos en tiempo real que emite Laravel
  • ¿Con qué funciona? → Laravel Reverb (lo más actual), Pusher, Ably...
  • ¿Es obligatorio? → No, pero hace que el código sea mucho más limpio y Laravel-style.

Ejemplo

// En tu archivo app.js o similar (con Vite / Laravel Mix)
import Echo from 'laravel-echo';

window.Echo = new Echo({
    broadcaster: 'reverb',          // o 'pusher', 'ably', etc.
    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'],
});

// Suscribirse a un canal público
window.Echo.channel('chat-general')
    .listen('MensajeEnviado', (e) => {
        console.log('Nuevo mensaje:', e.mensaje);
        // Aquí actualizas el chat en pantalla
    });

// Canal privado (solo usuarios autenticados)
window.Echo.private(`usuario.${userId}`)
    .listen('NotificacionRecibida', (e) => {
        alert('¡Nueva notificación!: ' + e.texto);
    });

// Canal de presencia (ver quién está conectado)
window.Echo.join(`sala.${salaId}`)
    .here((users) => {
        console.log('Usuarios conectados ahora:', users);
    })
    .joining((user) => {
        console.log(user.name + ' se unió');
    })
    .leaving((user) => {
        console.log(user.name + ' se fue');
    });
Laravel Echo es la pieza del frontend que se conecta a Reverb para que mostrar los mensajes, notificaciones o actualizaciones al instante.