Créez des notifications Web à l’aide de Laravel et des canaux Pusher

David Yao
David Yao
Jan 3 · 6 min read

Lors de la création d’applications Web, il n’est pas rare de trouver une sorte de système de notification intégré à l’application qui vous avertira instantanément lorsqu’une personne exécute une action liée à vous ou à votre compte. Sur Facebook, vous serez averti lorsque quelqu’un apprécie votre statut ou lorsque quelqu’un commente votre profil. Nous allons reproduire cette fonctionnalité en créant un système de notifications Web à l’aide de Laravel et Pusher .

Pour suivre ce tutoriel, PHP et Laravel doivent être installés sur votre ordinateur.

Ce que nous construirons

Après ce tutoriel, nous montrerons comment créer une petite application Web pour afficher des notifications à l’aide de Laravel et Pusher. Ce serait semblable à la façon dont des sites Web comme Facebook affichent des notifications. Voici un aperçu de ce que nous construirions:

comment-créer-notifications-Web-utilisant-laravel-and-poussoir
comment-créer-notifications-Web-utilisant-laravel-and-poussoir

Configuration de votre application Pusher

Créez un compte Pusher , si ce n’est déjà fait, puis configurez votre application comme indiqué dans la capture d’écran ci-dessous.

comment-créer-notifications-Web-utilisant-laravel-and-pusher-1
comment-créer-notifications-Web-utilisant-laravel-and-pusher-1

Configurer votre application Laravel

Vous pouvez créer une nouvelle application Laravel en exécutant la commande ci-dessous dans votre terminal:

laravel new laravel-web-notifications

Après cela, nous devrons installer le kit de développement PHP Pusher. Pour ce faire, utilisez Composer en exécutant la commande ci-dessous:

composer require pusher/pusher-php-server

Lorsque Composer est terminé, nous devrons configurer Laravel pour qu’il utilise Pusher en tant que pilote de diffusion. Pour ce faire, ouvrez le fichier .env situé dans le répertoire racine de votre installation de Laravel. Mettez à jour les valeurs pour qu'elles correspondent à la configuration ci-dessous:

PUSHER_APP_ID=322700
BROADCAST_DRIVER=pusher

// prenez les identifiants dans votre tableau de bord pusher
PUSHER_APP_ID=XXXXX
PUSHER_APP_KEY=XXXXXXX
PUSHER_APP_SECRET=XXXXXXX

Remarque importante: Si vous utilisez le cluster EU ou AP , veillez à mettre à jour le tableau d’options dans votre fichier de configuration config/broadcasting.php, car Laravel utilise par défaut le serveur américain. Vous pouvez utiliser toutes les options prises en charge par la bibliothèque PHP Pusher.

Ouvrez config/app.phpet décommentez le App\Providers\BroadcastServiceProvider::class.

Création de notre application Laravel et Pusher

Maintenant que la configuration est terminée, créons notre application. Premièrement, nous créerions une classe Event qui diffuserait à Pusher à partir de notre application Laravel. Les événements peuvent être déclenchés de n’importe où dans l’application.

php artisan make:event StatusLiked

Cela va créer une nouvelle classe StatusLiked dans le répertoire app/Eventsrépertoire. Ouvrez le contenu du fichier et mettez à jour ce qui suit:

<?php

namespace App\Events;

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

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'];
}
}

Ci-dessus, nous avons implémenté l’interface ShouldBroadcast, ce qui indique à Laravel que cet événement doit être diffusé à l'aide du pilote que nous avons défini dans le fichier de configuration.

Nous avons également un constructeur qui accepte deux paramètres, nom d’utilisateur et message. Nous y reviendrons plus tard. Nous avons affecté ces variables à des propriétés de classe nommées de la même manière. Il est important de définir la visibilité des propriétés en public ; si vous ne le faites pas, la propriété sera ignorée.

Enfin, nous définissons le nom de la chaîne sur laquelle diffuser.

Création des vues d’application

Nous allons rester simples et créer une vue unique dans laquelle vous pouvez voir une barre de navigation avec une icône de notification. L’icône sera mise à jour lorsque de nouvelles notifications sont disponibles sans qu’il soit nécessaire d’actualiser la page. Les notifications sont éphémères dans ce tutoriel par conception; vous pouvez étendre la fonctionnalité et la faire durer plus longtemps après le rechargement de la page si vous le souhaitez.

Ouvrez le fichier welcome.blade.php et remplacez-le par le code HTML ci-dessous.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Application</title>
<link 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>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Demo App</a>
</div>

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-notifications">
<a href="#notifications-panel" class="dropdown-toggle" data-toggle="dropdown">
<i data-count="0" class="glyphicon glyphicon-bell notification-icon"></i>
</a>

<div class="dropdown-container">
<div class="dropdown-toolbar">
<div class="dropdown-toolbar-actions">
<a href="#">Mark all as read</a>
</div>
<h3 class="dropdown-toolbar-title">Notifications (<span class="notif-count">0</span>)</h3>
</div>
<ul class="dropdown-menu">
</ul>
<div class="dropdown-footer text-center">
<a href="#">View All</a>
</div>
</div>
</li>
<li><a href="#">Timeline</a></li>
<li><a href="#">Friends</a></li>
</ul>
</div>
</div>
</nav>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//js.pusher.com/3.1/pusher.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script 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('App\\Events\\StatusLiked', function(data) {
var existingNotifications = notifications.html();
var avatar = Math.floor(Math.random() * (71 - 20 + 1)) + 20;
var newNotificationHtml = `
<li class="notification active">
<div class="media">
<div class="media-left">
<div class="media-object">
<img src="https://api.adorable.io/avatars/71/`+avatar+`.png" class="img-circle" alt="50x50" style="width: 50px; height: 50px;">
</div>
</div>
<div class="media-body">
<strong class="notification-title">`+data.message+`</strong>
<!--p class="notification-desc">Extra description can go here</p-->
<div class="notification-meta">
<small class="timestamp">about 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>

Il s’agit principalement de bruits de démarrage, nous allons donc en isoler les parties importantes, principalement le langage Javascript. Nous incluons la bibliothèque javascript Pusher , puis nous avons ajouté le bloc javascript qui fait la magie. Regardons quelques extraits du bloc javascript:

// Activation de la journalisation Pusher - à ne pas inclure en //production
// Pusher.logToConsole = true;

// Initiation de la librairie JS Pusher
var pusher = new Pusher('API_KEY_HERE', {
encrypted: true
});

// S'abonner à la chaîne spécifiée dans notre événement Laravel
var channel = pusher.subscribe('status-liked');

// Lier une fonction à un événement (la classe Laravel)
channel.bind('App\\Events\\StatusLiked', function(data) {
// ceci est appelé quand la notification de l'événement est recue...
});

Par défaut, Laravel diffusera l’événement en utilisant le nom de la classe de l’événement. Toutefois, vous pouvez personnaliser le nom de la diffusion en définissant une diffusion comme méthode sur l’événement: public function broadcastAs () {return ‘nom-événement’; }

Le code ci-dessus initialise simplement la bibliothèque Pusher JS et s’abonne à un canal. Il établit ensuite un callback à appeler lorsque l’événement diffusé est reçu sur ce canal.

Tester notre mise en place

Enfin, pour tester notre configuration, nous allons créer une route qui appelle manuellement l’événement. Si tout fonctionne comme prévu, nous recevrons une nouvelle notification à tout moment. Ajoutons la nouvelle route:

Route::get('test', function () {
event(new App\Events\StatusLiked('Someone'));
return "Evénement envoyé !";
});

Nous pouvons maintenant démarrer un serveur PHP avec Laravel afin de tester notre code pour voir s’il fonctionne.

$ php artisan serve

Conclusion

Dans cet article, nous avons pu exploiter la puissance de Pusher pour créer un système de notifications Web moderne, ce qui était très simple. Cela ne fait que gratter la surface de ce qui peut être vraiment fait avec Pusher. L’exemple était juste pour vous montrer les possibilités.

Et voilà, j’espère que ça vous aidera. Cliquez ici pour plus de tutos en Laravel.

  • Merci d’avoir lu ! Si vous avez aimé cet article,
  • Faites un coucou sur : Instagram | Facebook | Twitter |
  • Avez-vous besoin d’aide pour votre projet web ? Ecrivez moi à l’adresse suivante : david@oschool.ci

Originally published at Deviens développeur web.

David Yao

Written by

David Yao

Full Stack Developer. Founder of https://oschool.ci. My goal is to be one of the greatest programming teachers and entrepreneurs in Africa

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade