Notifications en temps réel avec Laravel 11 et Pusher
Comment ajouter des notifications en temps réel à une application Laravel 11 avec Pusher : diffusion d'événements, canaux privés et écoute côté front.
Les notifications en temps réel (un nouveau message, une commande, une alerte) transforment l'expérience d'une application. Voici l'approche que j'utilise en production avec Laravel 11 et Pusher. J'ai publié une version détaillée de ce guide sur Medium ; cet article en résume l'architecture.
1. Configurer la diffusion (broadcasting)
Laravel diffuse les événements vers un service WebSocket. Pusher est le plus simple à mettre en place. On définit le driver de broadcast et les clés dans le fichier d'environnement.
// .env
BROADCAST_CONNECTION=pusher
PUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret
PUSHER_APP_CLUSTER=eu2. Créer un événement diffusable
L'événement implémente ShouldBroadcast et expose le canal sur lequel il sera émis. Un canal privé garantit que seul l'utilisateur concerné reçoit la notification.
class OrderShipped implements ShouldBroadcast
{
public function __construct(public Order $order) {}
public function broadcastOn(): PrivateChannel
{
return new PrivateChannel('orders.' . $this->order->user_id);
}
}3. Écouter côté front
Avec Laravel Echo, on s'abonne au canal privé et on réagit à l'événement en temps réel, sans rechargement de page.
window.Echo.private(`orders.${userId}`)
.listen('OrderShipped', (e) => {
showToast(`Order #${e.order.id} shipped!`);
});Cette même architecture alimente les notifications, les tableaux de bord live et les messageries instantanées. Pour la version complète, avec la gestion de l'authentification des canaux privés, lisez le guide détaillé :
Lire le guide complet sur Medium ↗Un projet web premium en tête ?
Décrivez-moi votre objectif. Première consultation gratuite et sans engagement.
Discutons de votre projet