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

概述

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

1. 后端 (Laravel)：設置 SSE 端點來傳輸通知。
2. 前端 (Vue.js)：設置 EventSource 來監(jiān)聽傳入通知。

第 1 步：后端（Laravel）

1.1 在 Laravel 中創(chuàng)建 SSE 路由

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

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

1.2 流式通知的控制器方法

接下來，在NotificationController中，實現(xiàn)從數(shù)據(jù)庫獲取未讀通知的邏輯，并通過SSE將它們流式傳輸?shù)娇蛻舳恕?br>

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() 方法用于發(fā)送無限的事件流。
通知：我們正在查詢通知模型以獲取特定用戶的未讀通知（點擊 = 0）。通知被編碼為 JSON 并發(fā)送到客戶端。
標頭：標頭是為 SSE 設置的（內(nèi)容類型：text/event-stream）。
無限循環(huán)： while (true) 循環(huán)保持連接打開，并每 5 秒不斷發(fā)送新通知（可通過修改 sleep(5) 進行調(diào)整）。

第 2 步：前端 (Vue.js)

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

2.1。設置 Vue 組件監(jiān)聽 SSE 事件

創(chuàng)建一個 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：我們創(chuàng)建一個監(jiān)聽 /api/notifications 端點的 EventSource 實例。這將建立與服務器的持久連接。 onmessage：此事件偵聽器處理傳入消息。數(shù)據(jù)從 JSON 解析并添加到通知數(shù)組中。 onerror：如果發(fā)生錯誤（例如，如果 SSE 連接丟失），我們會記錄錯誤并關閉連接。
2. beforeDestroy：為了防止內(nèi)存泄漏，組件銷毀時會關閉SSE連接。

結(jié)論

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

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