Cómo crear notificaciones web usando Laravel y canales Pusher

Muchas aplicaciones web incluyen un sistema de notificaciones dentro de la aplicación que te notificará instantáneamente cuando alguien realice una acción relacionada contigo o con tu cuenta. En Facebook, recibirás una notificación cuando a alguien le guste tu estado o cuando alguien comente en tu perfil. Este tutorial te guiará en la replicación de esta funcionalidad mediante la creación de un sistema de notificaciones basado en la web con Laravel y Pusher.

Prerrequisitos

Para seguir este tutorial necesitas tener PHP y Laravel instalados en tu máquina, junto con una cuenta Pusher.

Lo que estaríamos construyendo

Después de este tutorial, demostraremos cómo podemos hacer que una pequeña aplicación web muestre notificaciones usando Laravel y Pusher. Sería similar a cómo muestran las notificaciones los sitios web como Facebook. Aquí hay una vista previa de lo que estaríamos construyendo:

Configuración de su aplicación Pusher

Cree una cuenta Pusher, si aún no lo ha hecho, y luego configure su aplicación como se ve en la captura de pantalla a continuación.

Configurando tu aplicación Laravel

Cree una nueva aplicación Laravel ejecutando el siguiente comando en su terminal:

laravel new laravel-web-notifications

Después de eso, instala el SDK PHP de Pusher con Composer. Ejecuta el siguiente comando:

composer require pusher/pusher-php-server

Cuando Composer esté terminado, el siguiente paso es configurar Laravel para que use Pusher como su controlador de transmisión. Para ello, abra el .envarchivo que se encuentra en el directorio raíz de su instalación de Laravel. Actualice los valores para que coincidan con la configuración que se muestra a continuación:

    PUSHER_APP_ID=322700    BROADCAST_DRIVER=pusher    // Get the credentials from your pusher dashboard    PUSHER_APP_ID=XXXXX    PUSHER_APP_KEY=XXXXXXX    PUSHER_APP_SECRET=XXXXXXX

Nota importante: si estás usando el clúster de la UE o AP , asegúrate de actualizar la matriz de opciones en tu config/broadcasting.phpconfiguración, ya que Laravel usa el servidor de EE. UU. de manera predeterminada. Puedes usar todas las opciones que admite la biblioteca PHP Pusher.

Abra config/app.phpy descomente el AppProvidersBroadcastServiceProvider::class.

Creando nuestra aplicación Laravel y Pusher

Ahora que los pasos de configuración están completos, es momento de crear la aplicación. Primero, cree una Eventclase que transmitirá a Pusher desde nuestra aplicación Laravel. Los eventos se pueden activar desde cualquier parte de la aplicación.

php artisan make:event StatusLiked

Esto creará una nueva StatusLikedclase en el app/Eventsdirectorio. Abra el contenido del archivo y actualícelo como se indica a continuación:

?phpnamespace AppEvents;use IlluminateQueueSerializesModels;use IlluminateFoundationEventsDispatchable;use IlluminateBroadcastingInteractsWithSockets;use IlluminateContractsBroadcastingShouldBroadcast;class StatusLiked implements ShouldBroadcast{use Dispatchable, InteractsWithSockets, SerializesModels;public $username;public $message;/** * Create a new event instance. * * @return void */public function __construct($username){$this-username = $username;$this-message  = "{$username} liked your status";}/** * Get the channels the event should broadcast on. * * @return Channel|array */public function broadcastOn(){return ['status-liked'];}}

La ShouldBroadcastinterfaz le dice a Laravel que este evento debe transmitirse utilizando cualquier controlador configurado en el archivo de configuración.

También hay un constructor que acepta dos parámetros, nombre de usuario y verbo. Estas variables se asignan a propiedades de clase que se nombran de la misma manera. Es importante establecer la visibilidad de las propiedades como pública ; si no lo hace, la propiedad se ignorará.

Por último, se establece el nombre del canal en el que se transmitirá.

Creación de las vistas de la aplicación

En este tutorial se utilizará una única vista con una barra de navegación y un icono de notificación. El icono se actualizará cuando haya nuevas notificaciones disponibles sin necesidad de actualizar la página. Las notificaciones son efímeras en este tutorial por diseño; puedes ampliar la funcionalidad y hacer que duren más tiempo después de que se vuelva a cargar la página si lo deseas.

Abra el welcome.blade.phparchivo y reemplácelo con el HTML a continuación.

!DOCTYPE htmlhtml  headmeta charset="utf-8"meta http-equiv="X-UA-Compatible" content="IE=edge"meta name="viewport" content="width=device-width, initial-scale=1"titleDemo Application/titlelink rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"link rel="stylesheet" type="text/css" href="/css/bootstrap-notifications.min.css"!--[if lt IE 9]  script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"/script  script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"/script![endif]--  /head  bodynav  divdiv  button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false"spanToggle navigation/spanspan/spanspan/spanspan/span  /button  a href="#"Demo App/a/divdiv  ulli  a href="#notifications-panel" data-toggle="dropdown"i data-count="0"/i  /a  divdiv  diva href="#"Mark all as read/a  /div  h3Notifications (span0/span)/h3/divul/uldiv  a href="#"View All/a/div  /div/lilia href="#"Timeline/a/lilia href="#"Friends/a/li  /ul/div  /div/navscript src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"/scriptscript src="//js.pusher.com/3.1/pusher.min.js"/scriptscript src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"/scriptscript type="text/javascript"  var notificationsWrapper   = $('.dropdown-notifications');  var notificationsToggle    = notificationsWrapper.find('a[data-toggle]');  var notificationsCountElem = notificationsToggle.find('i[data-count]');  var notificationsCount     = parseInt(notificationsCountElem.data('count'));  var notifications          = notificationsWrapper.find('ul.dropdown-menu');  if (notificationsCount = 0) {notificationsWrapper.hide();  }  // Enable pusher logging - don't include this in production  // Pusher.logToConsole = true;  var pusher = new Pusher('API_KEY_HERE', {encrypted: true  });  // Subscribe to the channel we specified in our Laravel Event  var channel = pusher.subscribe('status-liked');  // Bind a function to a Event (the full Laravel class)  channel.bind('AppEventsStatusLiked', function(data) {var existingNotifications = notifications.html();var avatar = Math.floor(Math.random() * (71 - 20 + 1)) + 20;var newNotificationHtml = `  li  divdiv  divimg src="https://api.adorable.io/avatars/71/`+avatar+`.png" alt="50x50"  /div/divdiv  strong`+data.message+`/strong  !--pExtra description can go here/p--  divsmallabout a minute ago/small  /div/div  /div  /li`;notifications.html(newNotificationHtml + existingNotifications);notificationsCount += 1;notificationsCountElem.attr('data-count', notificationsCount);notificationsWrapper.find('.notif-count').text(notificationsCount);notificationsWrapper.show();  });/script  /body/html

Hay mucho código para repasar, pero las partes importantes son las partes de Javascript. Se incluye la biblioteca de Javascript Pusher y, luego, el bloque de Javascript que envía notificaciones. Estos son los fragmentos importantes del bloque de Javascript:

// Enable pusher logging - don't include this in production// Pusher.logToConsole = true;// Initiate the Pusher JS libraryvar pusher = new Pusher('API_KEY_HERE', {encrypted: true});// Subscribe to the channel we specified in our Laravel Eventvar channel = pusher.subscribe('status-liked');// Bind a function to a Event (the full Laravel class)channel.bind('AppEventsStatusLiked', function(data) {// this is called when the event notification is received...});

Nota: De forma predeterminada, Laravel transmitirá el evento utilizando el nombre de la clase del evento. Sin embargo, puedes personalizar el nombre de la transmisión definiendo una transmisión como método en el evento:

public function broadcastAs() {  return 'event-name';}

El código anterior inicializa la biblioteca Pusher JS y se suscribe a un canal. Luego, establece una devolución de llamada para llamar cuando se recibe el evento transmitido en ese canal.

Probando la configuración

Por último, para probar esta configuración, crea una ruta que llame al evento de forma manual. Si todo funciona como se espera, aparecerá una nueva notificación cada vez que se llegue a la ruta. Agreguemos la nueva ruta:

Route::get('test', function () {event(new AppEventsStatusLiked('Someone'));return "Event has been sent!";});

Ahora inicie un servidor PHP usando Laravel para probar que el código funciona:

$ php artisan serve

Conclusión

En este tutorial, aprovechaste el poder de Pusher para crear un sistema de notificaciones web moderno con relativamente poco código. Esta función es un pequeño ejemplo de las muchas cosas que se pueden hacer con Pusher. Este ejemplo es una de las muchas herramientas posibles que puedes crear con Pusher.

El código está disponible en GitHub.