Notifications en temps réel avec événements envoyés par le serveur (SSE) dans Laravel et Vue.js

Les événements envoyés par le serveur (SSE) sont une excellente solution pour activer des notifications ou des mises à jour en temps réel dans votre application. Contrairement aux WebSockets, SSE permet une communication unidirectionnelle du serveur vers le client, ce qui le rend léger et facile à mettre en œuvre. Dans ce didacticiel, nous expliquerons comment configurer SSE dans un backend Laravel et consommer les événements dans une interface Vue.js.

Aperçu

Nous allons créer un système simple de notification en temps réel à l’aide de SSE. Le serveur (Laravel) enverra des notifications au client (Vue.js) chaque fois qu'il y aura de nouvelles notifications pour l'utilisateur authentifié. Voici un aperçu de ce que nous couvrirons :

1. Backend (Laravel) : configurez un point de terminaison SSE pour diffuser les notifications.
2. Frontend (Vue.js) : configurez une EventSource pour écouter les notifications entrantes.

Étape 1 : Back-end (Laravel)

1.1 Créer une route SSE dans Laravel

Dans votre routes/api.php, créez un point de terminaison pour le flux SSE. Cela permettra à votre interface Vue.js d'établir une connexion SSE et d'écouter les notifications.
utilisez AppHttpControllersNotificationController ;

Route::get('/notifications', [NotificationController::class, 'get']);

1.2 Méthode du contrôleur pour les notifications en streaming

Ensuite, dans NotificationController, implémentez la logique pour récupérer les notifications non lues de la base de données et les diffuser au client via SSE.

namespace App\Http\Controllers;

use App\Models\Notification;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class NotificationController extends Controller
{
    public function get(Request $request)
    {
        $headers = [
            "Content-Type" => "text/event-stream",
            "Cache-Control" => "no-cache",
            "Connection" => "keep-alive",
            "X-Accel-Buffering" => "no",
        ];

        return response()->stream(function () {
            while (true) {
                // Fetch the unread notifications for the authenticated user
                $notifications = Notification::where('clicked', 0)
                                             ->where('user_id', 2)  // For now, hardcoding the user ID, you can replace it with Auth::id() for dynamic user handling
                                             ->get();

                // If there are notifications, send them to the frontend
                if ($notifications->isNotEmpty()) {
                    // Format notifications as JSON and send them via SSE
                    echo "data: " . json_encode($notifications) . "\n\n";
                }

                // Flush the output buffer
                ob_flush();
                flush();

                // Sleep for a few seconds before checking again
                sleep(5);
            }
        }, 200, $headers);
    }
}

Explication :

Streaming Response : La méthode Response()->stream() est utilisée pour envoyer un flux infini d'événements.
Notifications : nous interrogeons le modèle de notification pour les notifications non lues (cliquées = 0) pour un utilisateur spécifique. Les notifications sont codées au format JSON et envoyées au client.
En-têtes : les en-têtes sont définis pour SSE (Content-Type : text/event-stream).
Boucle infinie : La boucle while (true) maintient la connexion ouverte et envoie en continu de nouvelles notifications toutes les 5 secondes (réglable en modifiant sleep(5)).

Étape 2 : Frontend (Vue.js)

Maintenant, configurons l'interface Vue.js pour écouter ces notifications à l'aide de l'API EventSource.

2.1. Configurer le composant Vue pour écouter les événements SSE

Créez un composant Vue qui écoutera les événements entrants du flux SSE.

<template>
  <div>
    <h3>Unread Notifications</h3>
    <ul v-if="notifications.length">
      <li v-for="notification in notifications" :key="notification.id">
        {{ notification.message }}
      </li>
    </ul>
    <p v-else>No new notifications</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notifications: [], // Store notifications
    };
  },
  mounted() {
    // Initialize EventSource to listen to the /api/notifications endpoint
    const eventSource = new EventSource('/api/notifications');

    // Handle incoming events from SSE
    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data); // Parse JSON data from the server
      this.notifications = data;  // Update notifications list
    };

    // Handle errors
    eventSource.onerror = (error) => {
      console.error("EventSource failed:", error);
      eventSource.close(); // Close the connection if there's an error
    };
  },
  beforeDestroy() {
    // Close the SSE connection when the component is destroyed
    if (this.eventSource) {
      this.eventSource.close();
    }
  }
};
</script>

Explication :

1. EventSource : nous créons une instance EventSource qui écoute le point de terminaison /api/notifications. Cela établit une connexion persistante au serveur. onmessage : cet écouteur d'événements traite les messages entrants. Les données sont analysées à partir de JSON et ajoutées au tableau de notifications. onerror : si une erreur se produit (par exemple, si la connexion SSE est perdue), nous enregistrons l'erreur et fermons la connexion.
2. beforeDestroy : Pour éviter les fuites de mémoire, la connexion SSE est fermée lorsque le composant est détruit.

Conclusion

Dans ce tutoriel, nous avons configuré des notifications en temps réel à l'aide d'événements envoyés par le serveur (SSE) dans un backend Laravel et une interface Vue.js. SSE offre un moyen simple et efficace d'envoyer des mises à jour en temps réel au client, ce qui en fait un excellent choix pour des fonctionnalités telles que les notifications. Avec une configuration minimale, vous pouvez améliorer votre application avec des fonctionnalités en direct et en temps réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!