Table des matières

📢 Système de notifications en temps réel avec Laravel et Pusher/Reverb

Pourquoi utiliser Pusher ou Laravel Reverb ?

Dans une application moderne, les notifications en temps réel sont essentielles pour améliorer l’expérience utilisateur (chat, alertes, mises à jour instantanées…). Laravel propose Broadcasting, qui fonctionne avec Pusher ou Laravel Reverb (nouveau serveur WebSocket de Laravel 11).

Dans ce guide, nous allons voir comment :
✅ Configurer Laravel Broadcasting
✅ Utiliser Pusher ou Reverb pour diffuser des événements en temps réel
✅ Afficher des notifications instantanées dans une application Laravel

1️⃣ Installer Laravel et configurer Broadcasting

Si ce n’est pas déjà fait, installe Laravel :

bashCopierModifiercomposer create-project laravel/laravel realtime-notifications

Installer Laravel Broadcasting

Laravel est déjà livré avec un support pour le broadcasting, mais il faut activer la bonne configuration.

Dans .env, change BROADCAST_DRIVER :

envCopierModifierBROADCAST_DRIVER=pusher

Installe le package Pusher :

bashCopierModifiercomposer require pusher/pusher-php-server

Ou, si tu utilises Laravel 11 et Reverb (alternative gratuite à Pusher) :

envCopierModifierBROADCAST_DRIVER=reverb

✅ Le broadcasting est prêt !

2️⃣ Configurer Pusher ou Laravel Reverb

Avec Pusher

1️⃣ Crée un compte sur Pusher
2️⃣ Ajoute tes clés dans .env :

envCopierModifierPUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret
PUSHER_APP_CLUSTER=mt1

3️⃣ Ajoute la configuration dans config/broadcasting.php :

phpCopierModifier'connections' => [
    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'useTLS' => true,
        ],
    ],
]

Avec Laravel Reverb (Laravel 11)

Aucune configuration externe n’est nécessaire. Il suffit d’utiliser le driver reverb.

Démarrer le serveur Reverb :

bashCopierModifierphp artisan reverb:start

✅ Ton application est maintenant connectée à WebSocket !

3️⃣ Créer un événement de notification avec Laravel Events

Laravel utilise les événements pour diffuser des notifications.

📌 Générer un événement :

bashCopierModifierphp artisan make:event NewNotification

📌 Modifie app/Events/NewNotification.php :

phpCopierModifieruse Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class NewNotification implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return ['notifications']; // Nom du canal
    }

    public function broadcastAs()
    {
        return 'new-notification'; // Nom de l'événement
    }
}

✅ Cet événement enverra des notifications sur le canal notifications.

4️⃣ Diffuser un événement depuis le backend

Maintenant, faisons un contrôleur pour envoyer des notifications.

📌 Créer un contrôleur :

bashCopierModifierphp artisan make:controller NotificationController

📌 Ajoute ceci dans app/Http/Controllers/NotificationController.php :

phpCopierModifieruse App\Events\NewNotification;
use Illuminate\Http\Request;

class NotificationController extends Controller
{
    public function sendNotification(Request $request)
    {
        broadcast(new NewNotification($request->message))->toOthers();

        return response()->json(['message' => 'Notification envoyée !']);
    }
}

✅ Cette méthode diffusera une notification en temps réel !

5️⃣ Côté Frontend : Écouter les notifications avec Pusher ou Reverb

📌 Installe Echo et Pusher :

bashCopierModifiernpm install --save laravel-echo pusher-js

📌 Configure resources/js/bootstrap.js :

jsCopierModifierimport Echo from "laravel-echo";
import Pusher from "pusher-js";

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: "pusher",
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true
});

📌 Ou pour Laravel Reverb (Laravel 11) :

jsCopierModifierimport Echo from "laravel-echo";

window.Echo = new Echo({
    broadcaster: "reverb",
});

📌 Ajoute du JavaScript pour écouter les notifications (exemple avec Vue ou plain JS) :

jsCopierModifierwindow.Echo.channel("notifications")
    .listen(".new-notification", (event) => {
        alert("Nouvelle notification : " + event.message);
    });

✅ Les notifications s’affichent immédiatement ! 🚀

6️⃣ Tester les notifications en temps réel

1️⃣ Lance Laravel :

bashCopierModifierphp artisan serve

2️⃣ Démarre le serveur WebSocket (si tu utilises Reverb) :

bashCopierModifierphp artisan reverb:start

3️⃣ Envoie une requête pour tester la notification :

bashCopierModifiercurl -X POST -d "message=Hello World" http://127.0.0.1:8000/send-notification

✅ Tu verras immédiatement l’alerte sur ton frontend ! 🎉

7️⃣ Améliorations possibles

🔹 Stocker les notifications en base de données avec notifications de Laravel
🔹 Créer un panneau d’administration pour gérer les notifications
🔹 Utiliser Livewire ou Inertia.js pour une intégration plus fluide
🔹 Afficher les notifications avec des toasts Bootstrap ou Vue.js

🔮 Conclusion : Laravel + Pusher/Reverb = 🔥

En suivant ce guide, tu as appris à :
✅ Configurer Laravel pour le broadcasting
✅ Diffuser des événements avec Pusher ou Reverb
✅ Écouter et afficher des notifications en temps réel

Créer un système de notifications en temps réel avec Laravel et Pusher/Reverb