Laravel Reverb est le serveur de WebSockets officiel du framework, sorti en 2023 et remplaçant un vieillissant beyondcode/laravel-websockets qui était jusqu'alors le package plébiscité dans la communauté Laravel.
Les WebSockets sont une technologie puissante dès lors que vous souhaitez ajouter des fonctionnalités en temps réel dans votre application, l'exemple le plus courant d'utilisation de WebSockets étant un système de notification pour vos utilisateurs.
Un WebSocket fonctionne avec deux acteurs, un serveur, côté backend, gérant les événements et leur diffusion, et un client, côté frontend, écoutant et récupérant les événements.
Intégrer un serveur de WebSockets n'est donc pas une tâche aisée et demande des compétences à la fois en développement frontend et en développement backend.
Voyons aujourd'hui comment simplifier l'utilisation de Laravel Reverb en manipulant des WebSockets sans écrire la moindre ligne de code en JavaScript grâce à la puissance de Livewire !
Schéma fonctionnel
Avant de débuter ce tutoriel, voyons le schéma fonctionnel de ce que nous nous apprêtons à implémenter.
Laravel Reverb est donc un serveur de WebSocket, ces derniers permettent une communication bidirectionnelle et en temps réel entre un client et un serveur via une seule connexion persistante, contrairement aux requêtes HTTP traditionnelles qui ne persistent pas après avoir rendu une réponse.
Cela signifie qu'un utilisateur se rendant sur la page écoutant le WebSocket établira une connexion persistante entre son navigateur et le serveur tant que la page restera ouverte.
Dans le cadre de ce tutoriel, l'intégration de Reverb se fera de la manière suivante :
Nous utiliserons un simple événement Laravel qui sera dispatché vers une file d'attente. Un worker dépilera cette dernière pour diffuser l'événement vers le serveur de WebSockets, pour finir, le composant Livewire écoutera le serveur Reverb afin de recueillir les informations.
Installer Livewire
Tout d'abord, commençons par installer la dernière version de Livewire dans notre application Laravel :
1composer require livewire/livewireUne fois le package installé via Composer, créons un nouveau composant Livewire qui nous servira ensuite à communiquer avec Reverb :
1php artisan make:livewire StuffDans ce composant, ajoutons une propriété events qui contiendra un tableau vide :
1namespace App\Livewire; 2 3use Livewire\Component; 4 5class Stuff extends Component 6{ 7 public array $events = []; 8 9 public function render()10 {11 return view('livewire.stuff');12 }13}Dans le fichier blade livewire.stuff associé au composant, ajoutons une simple boucle de la propriété :
1<div>2 <h2>Events :</h2>3 <ul>4 @foreach ($events as $event)5 <li>{{ $event }}</li>6 @endforeach7 </ul>8</div>Pour finir, afin de simplifier la réalisation de ce tutoriel, nous modifierons et appellerons notre composant depuis la page d'accueil par défaut de votre application laravel, le fichier welcome.blade.php :
1<!DOCTYPE html> 2<html lang="fr"> 3<head> 4 <meta charset="utf-8"> 5 @vite(['resources/css/app.css', 'resources/js/app.js']) 6</head> 7<body> 8 <livewire:stuff /> 9 @livewireScripts10</body>11</html>Installer Reverb
Maintenant que Livewire est correctement installé et configuré, il est temps d'installer notre serveur de broadcasting à l'aide de la commande suivante :
1php artisan install:broadcastingLaravel est compatible avec plusieurs serveurs de broadcast, le framework vous laissera le choix et proposera par défaut d'installer Reverb.
À l'installation, vous aurez également la possibilité d'installer et de compiler les dépendances nécessaires au broadcast, à moins que vous souhaitiez une configuration personnalisée, il est important de laisser le framework installer les dépendances qui lui semblent nécessaires.
Créer l'event
Il est temps de créer l'événement qui portera le message vers le serveur de WebSocket, utilisons encore une fois une commande de création de Laravel :
1php artisan make:event StuffEventDans cet événement, deux choses importantes doivent être modifiées pour assurer le bon fonctionnement du broadcast.
Tout d'abord, il est nécessaire de préciser à Laravel que cet événement sera utilisé dans le cadre d'un serveur de broadcasting en ajoutant l'interface ShouldBroadcast.
Ensuite, cette interface vous oblige à implémenter la méthode broadcastOn qui déterminera les channels sur lesquels diffuser l'événement :
1namespace App\Events; 2 3use Illuminate\Broadcasting\Channel; 4use Illuminate\Broadcasting\InteractsWithSockets; 5use Illuminate\Contracts\Broadcasting\ShouldBroadcast; 6use Illuminate\Foundation\Events\Dispatchable; 7use Illuminate\Queue\SerializesModels; 8 9class StuffEvent implements ShouldBroadcast 10{11 use Dispatchable, InteractsWithSockets, SerializesModels;12 13 public function __construct(14 public string $value, 15 ){}16 17 public function broadcastOn(): array18 {19 return [20 new Channel('my-public-channel'), 21 ];22 }23}Un même événement peut être diffusé sur plusieurs channels, ces derniers peuvent être privés et restreints à un utilisateur. Afin de faciliter l'utilisation de Reverb dans ce tutoriel nous utiliserons le channel public Illuminate\Broadcasting\Channel.
Attention, ce channel étant public, cela signifie que tous les utilisateurs de l'application pourront l'écouter sans restriction !
Écouter le channel depuis Livewire
Nous y sommes presque, les packages sont installés, l'événement est créé ... il ne reste plus qu'à récupérer les événements envoyés vers Reverb directement depuis notre composant Livewire !
Pour ce faire, Livewire disposant d'un attribut On permettant d'écouter facilement un serveur de WebSocket.
Créons dans le composant une nouvelle méthode onStuffEventSent à laquelle nous associerons l'attribut On qui contiendra le nom du channel sur lequel les événements sont envoyés (my-public-channel) ainsi que le nom de l'événement à récupérer (StuffEvent) :
1namespace App\Livewire; 2 3use Livewire\Component; 4use Livewire\Attributes\On; 5 6class Stuff extends Component 7{ 8 public array $events = []; 9 10 public function render()11 {12 return view('livewire.stuff');13 }14 15 #[On('echo:my-public-channel,StuffEvent')] 16 public function onStuffEventSent($event) 17 { 18 $this->events[] = $event['value']; 19 } 20}echo étant un package front capable d'écouter un WebSocket
Tout est désormais opérationnel, quand un événement sera broadcast vers Reverb, Livewire écoutera et récupérera automatiquement le contenu de l'événement pour en assigner la valeur à sa propriété events… et cela sans écrire la moindre ligne de JavaScript !
Here we go ✨
Avant de voir la magie de Livewire opérée, vous devez lancer le worker qui traitera les événements en file d'attente, pour cela, exécutez la commande suivante :
1php artisan queue:listenEnsuite, démarrez le serveur de broadcast avec la commande suivante :
1php artisan reverb:start --debugUne fois ces deux processus en cours d'exécution, vous pourrez dispatcher un événement et le voir apparaître sur la page d'accueil de votre application Laravel :
1StuffEvent::dispatch('Hello, Reverb !');En dispatchant l'événement, celui ci sera traité par le worker et transmis à Reverb, vos utilisateurs sur la page contenant le composant écouteront le WebSocket et le message "Hello, Reverb !" s'affichera autant de fois que vous lancerez l'événement :
Félicitations, vous venez d'intégrer Reverb dans une application Laravel à l'aide de Livewire !
A lire
Autres articles de la même catégorie
Stratégies de performances en Laravel
Explorons trois stratégies de performance permettant d'améliorer les performances de votre application Laravel.
On installe PHP sur votre machine Windows
Si tu souhaites débuter en PHP et que tu possèdes une machine Windows, ce guide est fait pour toi !
Monitorer son site web
Est-ce que votre site est actuellement opérationnel ? On découverte un outil simple qui vous permettra de la savoir à tout moment !