Simplifiez l'utilisation de Reverb avec Livewire

Publié le 12 septembre 2024

Couverture de l'article Simplifiez l'utilisation de Reverb avec Livewire

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/livewire

Une fois le package installé via Composer, créons un nouveau composant Livewire qui nous servira ensuite à communiquer avec Reverb :

1php artisan make:livewire Stuff

Dans 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        @endforeach
7    </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    @livewireScripts
10</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:broadcasting

Laravel 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 StuffEvent

Dans 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(): array
18    {
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:listen

Ensuite, démarrez le serveur de broadcast avec la commande suivante :

1php artisan reverb:start --debug

Une 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

27 février 2023

Tutoriels

Piloter son application avec Forge

De l’installation du serveur au déploiement automatique, découvrons ensemble l’outil Forge.

William Suppo

18 janvier 2023

Tutoriels

PHPStan valide nos règles de conception

Comment s’assurer du respect de nos règles de conception ? Avec PHPStan bien sûr !

William Suppo

14 mars 2023

Tutoriels

Explorons la nouvelle class Process

Voyons un cas concret d'utilisation de la class Process pour améliorer nos performances

Mathieu De Gracia