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

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

Temps de lecture: 5 minutes

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

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

Configurer votre application Laravel

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



		


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:



		


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:



		


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.



		


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:



		


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.



		


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:



		


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:



		


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



		


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
Deviens toi aussi développeur web !
I agree to have my personal information transfered to MailChimp ( more information )
Commences ta carrière de développeur web, GRATUITEMENT, ici et maintenant !
Je hais les sapms. Votre adresse email ne sera jamais vendu ou partagé avec un tiers

Also published on Medium.

Partages à tous tes amis !

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.