


Echtzeitbenachrichtigungen mit Server-Sent Events (SSE) in Laravel und Vue.js
Dec 18, 2024 am 11:40 AMServer-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:
- Backend (Laravel): Richten Sie einen SSE-Endpunkt ein, um Benachrichtigungen zu streamen.
- 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>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:
- 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.
- 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!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Ersetzen Sie Stringzeichen in JavaScript

JQuery überprüfen, ob das Datum gültig ist

JQuery fügen Sie Scrollbar zu Div hinzu

Benutzerdefinierte Google -Search -API -Setup -Tutorial
