Notificaciones en tiempo real Laravel
Tutorial de notificaciones en tiempo real Laravel con pusher
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 :
Empecemos con el ejemplo práctico. Siga los siguiente pasos:
Establezca el Proyecto Laravel escribiendo el siguiente comando.
composer create-project --prefer-dist laravel/laravel notificacionlaravel
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.
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
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');
}
}
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);
}
}
Registramos las rutas en web.php
//web.php
Route::get('notify','NotificationController@notify');
Route::view('/notification', 'notification');
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.
Descarga código fuente 309
No hay descargable
Redactado por: , Leido 2427 veces
© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022