Notificaciones en Real Time en Laravel

Desarrollo de una aplicación práctica de notificaciones en real time en Laravel con Pusher. Para enviar un mensaje de una página a otra en la misma app.

Hola, en este ejemplo, les explicaré cómo implementar notificaciones en tiempo real de Laravel con un ejemplo práctico y sencillo. Usaremos Pusher para notificaciones en tiempo real. Pusher es uno de los servicios más famosos que lo ayuda a enviar notificaciones en tiempo real a sus aplicaciones. Al crear aplicaciones web, no es raro ver algún sistema de notificación en la aplicación que le avisará de inmediato cuando alguien realice una acción :

• Notificar si un usuario se autenticó en el sistema (registro y/o login)
• Notificar si un usuario realizó un pedido al carrito de compra de un sistema web.
• Notificar a determinados usuarios que otro usuario se ha registrado.

Empecemos con el ejemplo práctico. Siga los siguiente pasos:

#1: Descargar Proyecto Laravel

Establezca el Proyecto Laravel escribiendo el siguiente comando.

composer create-project --prefer-dist laravel/laravel notificacionlaravel

#2: Instale el paquete pusher-php-server

Primero, instale pusher-php-server a través del administrador de paquetes Composer.

composer requiere pusher/pusher-php-server

El paquete se registrará automáticamente.

#3: Configuración de la aplicación Pusher

A continuación, regístrese para obtener una nueva cuenta en Pusher.com, si ya tiene una cuenta, inicie sesión. Su aplicación como se ve en la captura de pantalla a continuación.

app_id = "xxx7113"
key = "xxx41eac20c3b19b3xxx"
secret = "xxx6843dba9f716e3014"
cluster = "us2"

Puede obtener su app_id, key, secret y también anotar su clúster. Estos se pueden ubicar en la sección Claves de la aplicación de su panel de Pusher. También puede ver la imagen a continuación para obtener más aclaraciones.

Ahora configuramos Laravel para usar Pusher, para hacer esto, abra el archivo.env y actualice los valores para que correspondan con la configuración a continuación:

//.env

PUSHER_APP_ID=xxxxx
PUSHER_APP_KEY=xxxxx
PUSHER_APP_SECRET=xxxxx
PUSHER_APP_CLUSTER=xxxxx

#4: Creamos un evento

Primero, creamos una clase de evento que se transmitiría a Pusher desde nuestro proyecto Laravel. Los eventos se pueden disparar desde cualquier parte de la aplicación.

php artisan make: event Notify

Esto creará una nueva clase Notificar en la aplicación >> Directorio de eventos. Abra el contenido del archivo y cambie a lo siguiente:

//Notify.php

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class Notify
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('notify-channel');
    }
}

#5: Crear un controlador

php artisan make:controller NotificationController

Se verá el siguiente código con el método:

//NotificationController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Pusher\Pusher;

class NotificationController extends Controller
{
    public function notify()
    {
        $options = array(
                        'cluster' => env('PUSHER_APP_CLUSTER'),
                        'encrypted' => true
                        );
        $pusher = new Pusher(
                            env('PUSHER_APP_KEY'),
                            env('PUSHER_APP_SECRET'),
                            env('PUSHER_APP_ID'), 
                            $options
                        );

        $data['message'] = 'Hola Codea ';
        $pusher->trigger('notify-channel', 'App\\Events\\Notify', $data);

    }
}

#6: Definimos la ruta

Registramos las rutas en web.php 

//web.php

Route::get('notify','NotificationController@notify');
Route::view('/notification', 'notification');

#7: Creamos una vista

Cree un archivo en resources/views/notification.blade.php y coloque el siguiente código en él.

<!DOCTYPE html>
<head>
  <title>Laravel Tiempo Real Codea.APP</title>  
  <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
  <script>
   var pusher = new Pusher('{{env("PUSHER_APP_KEY")}}', {
      cluster: '{{env("PUSHER_APP_CLUSTER")}}',
      encrypted: true
    });

    var channel = pusher.subscribe('notify-channel');
    channel.bind('App\\Events\\Notify', function(data) {
      //alert(data.message);
      mensaje.textContent= data.message
    });
  </script>
  <body>
    <h1>APP EN TIEMPO REAL</h1>
    <p id="mensaje"></p>

  </body>
</head>

A continuación, abra una nueva pestaña y visite http://localhost:8000/notify mientras tiene la http://localhost:8000/notification abierta en otra pestaña y debería ver la notificación.