Echtzeitbenachrichtigungen mit Server-Sent Events (SSE) in Laravel und Vue.js

Server-Sent Events (SSE) ist eine großartige Lösung, um Echtzeitbenachrichtigungen oder -aktualisierungen in Ihrer Anwendung zu ermöglichen. Im Gegensatz zu WebSockets ermöglicht SSE eine unidirektionale Kommunikation vom Server zum Client, wodurch es leichtgewichtig und einfach zu implementieren ist. In diesem Tutorial erfahren Sie, wie Sie SSE in einem Laravel-Backend einrichten und die Ereignisse in einem Vue.js-Frontend nutzen.

Überblick

Wir werden mit SSE ein einfaches Echtzeit-Benachrichtigungssystem erstellen. Der Server (Laravel) sendet Benachrichtigungen an den Client (Vue.js), wenn neue Benachrichtigungen für den authentifizierten Benutzer vorliegen. Hier ist eine Aufschlüsselung dessen, was wir behandeln werden:

1. Backend (Laravel): Richten Sie einen SSE-Endpunkt ein, um Benachrichtigungen zu streamen.
2. Frontend (Vue.js): Richten Sie eine EventSource ein, um auf eingehende Benachrichtigungen zu warten.

Schritt 1: Backend (Laravel)

1.1 Erstellen Sie eine SSE-Route in Laravel

Erstellen Sie in Ihrer Routes/api.php einen Endpunkt für den SSE-Stream. Dadurch kann Ihr Vue.js-Frontend eine SSE-Verbindung herstellen und auf Benachrichtigungen warten.
verwenden Sie AppHttpControllersNotificationController;

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

1.2 Controller-Methode für Streaming-Benachrichtigungen

Als nächstes implementieren Sie im NotificationController die Logik, um ungelesene Benachrichtigungen aus der Datenbank abzurufen und sie über SSE an den Client zu streamen.

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);
    }
}

Erklärung:

Streaming-Antwort: Die Methode „response()->stream()“ wird verwendet, um einen unendlichen Strom von Ereignissen zu senden.
Benachrichtigungen: Wir fragen das Benachrichtigungsmodell nach ungelesenen Benachrichtigungen (angeklickt = 0) für einen bestimmten Benutzer ab. Die Benachrichtigungen werden als JSON codiert und an den Client gesendet.
Header: Die Header sind für SSE festgelegt (Content-Type: Text/Event-Stream).
Endlosschleife: Die While-Schleife (wahr) hält die Verbindung offen und sendet kontinuierlich alle 5 Sekunden neue Benachrichtigungen (einstellbar durch Ändern von Sleep(5)).

Schritt 2: Frontend (Vue.js)

Jetzt richten wir das Vue.js-Frontend so ein, dass es mithilfe der EventSource-API auf diese Benachrichtigungen wartet.

2.1. Richten Sie die Vue-Komponente so ein, dass sie auf SSE-Ereignisse wartet

Erstellen Sie eine Vue-Komponente, die auf eingehende Ereignisse aus dem SSE-Stream wartet.

<template>
  <div>
    <h3 id="Unread-Notifications">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>

Erklärung:

1. EventSource: Wir erstellen eine EventSource-Instanz, die auf den Endpunkt /api/notifications lauscht. Dadurch wird eine dauerhafte Verbindung zum Server hergestellt. onmessage: Dieser Event-Listener verarbeitet eingehende Nachrichten. Die Daten werden von JSON geparst und dem Benachrichtigungsarray hinzugefügt. onerror: Wenn ein Fehler auftritt (z. B. wenn die SSE-Verbindung verloren geht), protokollieren wir den Fehler und schließen die Verbindung.
2. beforeDestroy: Um Speicherlecks zu verhindern, wird die SSE-Verbindung geschlossen, wenn die Komponente zerstört wird.

Abschluss

In diesem Tutorial haben wir Echtzeitbenachrichtigungen mithilfe von Server-Sent Events (SSE) in einem Laravel-Backend und einem Vue.js-Frontend eingerichtet. SSE bietet eine einfache und effiziente Möglichkeit, Aktualisierungen in Echtzeit an den Client zu übertragen, was es zu einer hervorragenden Wahl für Funktionen wie Benachrichtigungen macht. Mit minimalem Setup können Sie Ihre Anwendung mit Live-Echtzeitfunktionen erweitern.

Das obige ist der detaillierte Inhalt vonEchtzeitbenachrichtigungen mit Server-Sent Events (SSE) in Laravel und Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!