Le temps réel est devenu presqu’une nécessité incontournable pour les applications webs modernes. Pour l’implémentation de cette fonctionnalité, les WebSocket sont utilisés. Ainsi grâce à ce standard du web, nous pouvons mettre à jour l’interface de l’utilisateur, lui afficher un message (notification push ou autre) sans aucune interaction de sa part et sans rafraîchir le navigateur. Super non ?!😁

Pour avoir ce résultat, Laravel nous facilite la vie comme d’habitude et c’est ce que nous allons voir dans cet article.

1. Définition d’un WebSocket

Un WebSocket est un standard du web ou une technologie évoluée qui permet d’ouvrir un canal de communication bidirectionnelle entre un navigateur (client) et un serveur. Grâce à ce standard, le serveur et le client peuvent communiquer lorsqu’un événement a lieu. Nous nous arrêterons sur cette definition sommaire pour ne pas vous faire dormir😁

2. Implémentation d’un WebSocket dans un projet Laravel

Pour l’implémentation du temps réel dans notre application, Laravel met à notre disposition un puissant système d’événements et de diffusion d’événements (Broadcasting). Mais cela ne suffit pas pour avoir le temps réel que nous cherchons. Pour atteindre le résultat voulu, il faut ajouter un élément capital qui servira de pont entre le serveur (notre application Laravel) et le client (notre navigateur). Cet élément peut être un service tierce, une librairie ou un serveur. Comme exemple nous pouvons citer:

         🔥 Pusher (Pusher Channel) ;

         🔥 Redis (Redis channel):

         🔥 Socket.IO

Dans notre article nous allons utiliser Pusher.

3. La pratique

a. Créer un nouveau projet Laravel :

Nous allons commencer par créer un nouveau projet Laravel. Pour créer le projet, nous utiliserons composer:

b. Ajouter Pusher à notre projet Laravel :

Comme indiqué plus haut, nous utiliserons Pusher pour ajouter le temps réel à notre application. Nous utiliserons des canaux pusher ou Pusher channel. Installons donc le package composer correspondant:

Ensuite, nous modifierons notre fichier d’environnement pour indiquer le driver broadcast et aussi des informations spécifiques à Pusher:

c- Créer un évènement qui sera diffusé :

Pour créer un évènement avec Laravel, il n’y a rien de plus facile que:

Ce qui nous donne cette classe:

Mais cela ne suffit pas. Il faudra que notre classe implémente l’interface ShouldBroadcast. Ce qui nous donne:

Nous modifierons ensuite notre classe pour qu’elle puisse diffuser un message dans un canal Pusher que notre client écoutera.  Notre classe devient donc:

La dernière étape est de vérifier si notre configuration marche et que notre client reçoit bien nos messages. Pour cela, nous créerons une petite page qui affichera une alerte avec le message envoyé. Le script pour afficher le message est le suivant:

d- Test de notre configuration :

Et voilà!!🤓

Avec cette configuration vous pouvez créer une application de chat ou un système de commentaire en temps réel.

Nous espérons que cet article vous a été utile et que vous avez eu du plaisir à le lire. On se donne rendez-vous la semaine prochaine pour un autre article.