Real-Time Notifications with Server-Sent Events (SSE) in Laravel and Vue.js

Server-Sent Events (SSE) is a great solution for enabling real-time notifications or updates in your application. Unlike WebSockets, SSE allows for one-way communication from the server to the client, making it lightweight and easy to implement. In this tutorial, we'll walk through how to set up SSE in a Laravel backend and consume the events in a Vue.js frontend.

Overview

We’ll be creating a simple real-time notification system using SSE. The server (Laravel) will push notifications to the client (Vue.js) whenever there are new notifications for the authenticated user. Here's a breakdown of what we'll cover:

1. Backend (Laravel): Set up an SSE endpoint to stream notifications.
2. Frontend (Vue.js): Set up an EventSource to listen for incoming notifications.

Step 1: Backend (Laravel)

1.1 Create an SSE Route in Laravel

In your routes/api.php, create an endpoint for the SSE stream. This will allow your Vue.js frontend to establish an SSE connection and listen for notifications.
use App\Http\Controllers\NotificationController;

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

1.2 Controller Method for Streaming Notifications

Next, in the NotificationController, implement the logic to fetch unread notifications from the database and stream them to the 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);
    }
}

Explanation:

Streaming Response: The response()->stream() method is used to send an infinite stream of events.
Notifications: We are querying the Notification model for unread notifications (clicked = 0) for a specific user. The notifications are encoded as JSON and sent to the client.
Headers: The headers are set for SSE (Content-Type: text/event-stream).
Infinite Loop: The while (true) loop keeps the connection open and continuously sends new notifications every 5 seconds (adjustable by modifying sleep(5)).

Step 2: Frontend (Vue.js)

Now, let's set up the Vue.js frontend to listen for these notifications using the EventSource API.

2.1. Set Up Vue Component to Listen for SSE Events

Create a Vue component that will listen for the incoming events from the SSE stream.

<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>

Explanation:

1. EventSource: We create an EventSource instance that listens to the /api/notifications endpoint. This establishes a persistent connection to the server. onmessage: This event listener processes incoming messages. The data is parsed from JSON and added to the notifications array. onerror: If an error occurs (e.g., if the SSE connection is lost), we log the error and close the connection.
2. beforeDestroy: To prevent memory leaks, the SSE connection is closed when the component is destroyed.

Conclusion

In this tutorial, we’ve set up real-time notifications using Server-Sent Events (SSE) in a Laravel backend and a Vue.js frontend. SSE provides a simple and efficient way to push real-time updates to the client, making it an excellent choice for features like notifications. With minimal setup, you can enhance your application with live, real-time capabilities.