Laravel 和 Vue.js 中伺服器發送事件 (SSE) 的即時通知

伺服器發送事件 (SSE) 是應用程式中啟用即時通知或更新的絕佳解決方案。與 WebSocket 不同，SSE 允許從伺服器到客戶端的單向通信，使其輕量級且易於實現。在本教程中，我們將介紹如何在 Laravel 後端中設定 SSE 並在 Vue.js 前端中使用事件。

概述

我們將使用 SSE 建立一個簡單的即時通知系統。每當經過身份驗證的用戶有新通知時，伺服器 (Laravel) 就會將通知推送到客戶端 (Vue.js)。以下是我們將要介紹的內容的細分：

1. 後端 (Laravel)：設定 SSE 端點來傳送通知。
2. 前端 (Vue.js)：設定 EventSource 來監聽傳入通知。

第 1 步：後端（Laravel）

1.1 在 Laravel 建立 SSE 路由

在您的routes/api.php中，為SSE流建立一個端點。這將允許您的 Vue.js 前端建立 SSE 連線並監聽通知。
使用 AppHttpControllersNotificationController;

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

1.2 串流通知的控制器方法

接下來，在NotificationController中，實作從資料庫取得未讀取通知的邏輯，並透過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);
    }
}

說明：

串流回應：response()->stream() 方法用來傳送無限的事件流。
通知：我們正在查詢通知模型以取得特定使用者的未讀通知（點擊 = 0）。通知被編碼為 JSON 並發送到客戶端。
標頭：標頭是為 SSE 設定的（內容類型：text/event-stream）。
無限循環： while (true) 循環保持連線打開，並每 5 秒不斷發送新通知（可透過修改 sleep(5) 進行調整）。

第 2 步：前端 (Vue.js)

現在，讓我們設定 Vue.js 前端以使用 EventSource API 監聽這些通知。

2.1。設定 Vue 元件監聽 SSE 事件

建立一個 Vue 元件來監聽來自 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>

說明：

1. EventSource：我們建立一個監聽 /api/notifications 端點的 EventSource 實例。這將建立與伺服器的持久連線。 onmessage：此事件偵聽器處理傳入訊息。資料從 JSON 解析並新增到通知數組。 onerror：如果發生錯誤（例如，如果 SSE 連線遺失），我們會記錄錯誤並關閉連線。
2. beforeDestroy：為了防止記憶體洩漏，元件銷毀時會關閉SSE連線。

結論

在本教程中，我們在 Laravel 後端和 Vue.js 前端中使用伺服器發送事件 (SSE) 設定即時通知。 SSE 提供了一種簡單且有效率的方式來向客戶端推送即時更新，使其成為通知等功能的絕佳選擇。只需最少的設置，您就可以透過即時功能增強您的應用程式。

以上是Laravel 和 Vue.js 中伺服器發送事件 (SSE) 的即時通知的詳細內容。更多資訊請關注PHP中文網其他相關文章！