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

概述

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

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

第 1 步：後端（Laravel）

1.1 在 Laravel 建立 SSE 路由

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

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

1.2 串流通知的控制器方法

接下來，在NotificationController中，實作從資料庫取得未讀取通知的邏輯，並透過SSE將它們串流傳輸?shù)娇蛻舳恕?

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

說明：

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

第 2 步：前端 (Vue.js)

現(xiàn)在，讓我們設(shè)定 Vue.js 前端以使用 EventSource API 監(jiān)聽這些通知。

2.1。設(shè)定 Vue 元件監(jiān)聽 SSE 事件

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

結(jié)論

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

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