Notificaciones en Real Time en Laravel

Tutorial de notificaciones en tiempo real Laravel con pusher

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.

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.

No hay descargable

Redactado por: , Leido 777 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021