Configurar Vue 3 y Laravel Pusher

Pusher es una plataforma que nos permite a los desarrolladores olvidarnos de la gestión, configuración y dolores de cabeza en general cuando desarrollamos aplicaciones en tiempo real, chats, juegos, subastas y similares.

Laravel hace fácil el trabajo con Pusher, gracias a como está configurado Laravel podemos incorporar Pusher de una forma tremendamente sencilla, de esta forma, en pocos minutos, tendremos configurado nuestro servidor Websocket con Laravel.

Desde Vue conectaremos con Pusher y estaremos a la escucha de nuevos eventos que disparemos con Laravel, la idea es más simple de lo que parece, mira lo siguiente.

De esta forma tan sencilla podremos comunica a Laravel y Vue para que se comuniquen vía Websockets y así nos ofrezcan las características de las aplicaciones en tiempo real.

Crea una cuenta en Pusher

Lo primero que necesitamos son las credenciales de Pusher, así que si no lo has hecho todavía, crea una cuenta y consigue las claves de tu aplicación, es un paso a paso muy intuitivo.

Instala y configura Pusher en Laravel

Una vez has conseguido las claves, primero vamos a instalar las dependencias necesarias en el servidor para que Laravel sepa comunicarse con Pusher.

A continuación, configura tu archivo .env para que nuestras claves de Pusher queden registradas:

Descomenta el Provider AppProvidersBroadcastServiceProvider::class del archivo config/app.php de Laravel ya que de otra forma no podremos interactuar con el sistema de eventos de Laravel.

Lanza tu servidor local con Laravel

Aunque en este caso no es necesario hacerlo como te voy a explicar, si estás desarrollando una aplicación móvil te será muy útil si no lo conocías.

En lugar de utilizar el comando php artisan serve como lo hacemo siempre, vamos a definir también el host, en este caso utilizando nuestra IP local:

Puedes encontrar tu IP local en Windows con el comando ipconfig o en Mac OS desde las preferencias del sistema -> red.

La idea es simple, a partir de ahora nuestras conexiones serán a través de http://192.168.1.27:8000, así, en caso de estar desarrollando una aplicación móvil que no sabe qué significa localhost, conectando desde nuestro dispositivo a nuestra red local, podrá acceder a este servidor :)

Configura tu proyecto Vue 3 con Pusher y Laravel Echo

Lo primero que debemos hacer es crear un archivo .env para registrar nuestras variables de entorno:

Recuerda modificar los valores por los tuyos o no funcionará.

A continuación, vamos a instalar las dependencias necesarias, en este caso los clientes pusher y laravel-echo.

Si al lanzar el servidor de desarrollo con Vue algo falla, simplemente elimina el directorio node_modules y vuelve a ejecutar yarn o npm install, con eso quedará funcionando.

Una vez ya tenemos las  dependencias listas y las variables de entorno configuradas, es momento de configurar Echo para que sepa atender las notificaciones de Pusher, para ello, abre el archivo main.js y añade lo siguiente antes de la instancia de Vue.

Eschucha eventos Pusher desde Vue

Ahora que ya lo teneos todo listo, vamos a abrir el archivo Home.vue para añadir la siguiente lógica en el método setup.

Utilizando window.Echo, que es lo que nos permite escuchar los eventos de Pusher, nos conectamos al canal chat y estamos a la escucha del evento .NewMessage. Ahora lo que nos queda es ir de nuevo a Laravel y crear este evento para que lo podamos detectar con Vue y todo quede funcionando.

Crea un evento con Laravel

Lo primero que debemos hacer es crear nuestro evento con el siguiente comando.

Lo anterior habrá creado un archivo app/Events/NewMessage.php el cual pasamos a modificar.

Casi lo más importante de este archivo es la implementación de la clase, si no implementamos ShouldBroadcastNow nuestros eventos no se emitirán al instante y parecería que nuestro trabajo no está bien hecho. El resto es muy sencillo, decimos a qué canal pertenece (chat), el nombre del evento que va a emitir (NewMessage) y los datos que retornará al emitir el evento, en el constructor pasamos los datos necesarios para enviar al cliente.

Emitir el evento NewMessage con Laravel

Para finalizar esta entrada, abre el archivo de rutas web.php y añade el siguiente código, el cual nos permitirá emitir nuestro nuevo evento, el cual será escuchado por los clientes Vue por arte de magia.

Si lo has hecho todo bien, desde la consola del navegador deberías ver lo siguiente: