Retour au blog
Pizza tracking avec Laravel Reverb

Pizza tracking avec Laravel Reverb

Sommaire

  1. Introduction au projet
  2. Tutoriel vidéo
  3. Mise en place du projet Laravel
  4. Configuration du WebSocket avec Laravel Reverb
  5. Affichage du suivi en temps réel
  6. Conclusion

Introduction au projet

Dans ce projet, nous allons simuler un suivi de commande en temps réel. Nous utiliserons Laravel Reverb pour gérer la diffusion des mises à jour de commande via WebSocket. Toutes les sources sont disponibles sur mon GitHub dans le projet Pizza Tracker.

Tutoriel vidéo

Mise en place du projet Laravel

Pour gagner du temps, j’ai déjà démarré l’application. Voici un aperçu de la structure :

  • OrderController : il gère les commandes. Chaque commande possède un statut, qui sera mis à jour en temps réel.
  • Order Status : un Enum qui va de 1 (créé) à 5 (livré).

Configuration du WebSocket avec Laravel Reverb

Installation

Pour installer Laravel Reverb, exécutez :

php artisan install:broadcasting

Configurez Reverb en ajoutant les paramètres d’authentification nécessaires dans .env.

Création d’un Event pour la diffusion des statuts

Nous allons créer un événement pour diffuser les mises à jour de statut de commande :

php artisan make:event PizzaOrderStatusUpdated

Dans cet événement, nous implémentons ShouldBroadcast pour qu’il soit placé en file d’attente. Nous utilisons également un Private Channel pour que seuls les utilisateurs autorisés reçoivent les mises à jour.

Création du système de suivi de commande

Ajout du canal de diffusion

Dans routes/channels.php, nous définissons un canal privé pour la commande :

Broadcast::channel('app.orders.{orderId}', function ($user, $orderId) {
    return $user->id === Order::findOrNew($orderId)->user_id;
});

Mise à jour du OrderController

À chaque mise à jour de commande, nous déclenchons l’événement PizzaOrderStatusUpdated :

PizzaOrderStatusUpdated::dispatch($order);

Affichage du suivi en temps réel

Initialisation du composant Alpine.js

Nous avons un composant Blade ProgressBar dans Alpine.js pour afficher la progression de la commande :

Echo.private(`app.orders.${this.orderId}`)
    .listen('PizzaOrderStatusUpdated', (response) => {
        this.updateSteps(response.order.status);
    });

Méthode de mise à jour de la progression

L’événement PizzaOrderStatusUpdated diffuse la progression, qui est ensuite affichée sur la barre de progression. Si une étape est complétée, elle s’affiche avec une coche verte ; sinon, l’étape en cours est indiquée par un anneau.

Conclusion

Grâce à Laravel et Reverb, nous avons mis en place un système de suivi de commande en temps réel de façon simple et fluide. Retrouvez le projet complet sur GitHub et n’hésitez pas à y jeter un œil pour mieux comprendre les détails.

Merci d’avoir suivi cette vidéo, et à bientôt pour un nouveau projet Laravel !