伺服器發送事件 (SSE) 是應用程式中啟用即時通知或更新的絕佳解決方案。與 WebSocket 不同，SSE 允許從伺服器到客戶端的單向通信，使其輕量級且易於實現。在本教程中，我們將介紹如何在 Laravel 後端中設定 SSE 並在 Vue.js 前端中使用事件。
我們將使用 SSE 建立一個簡單的即時通知系統。每當經過身份驗證的用戶有新通知時，伺服器 (Laravel) 就會將通知推送到客戶端 (Vue.js)。以下是我們將要介紹的內容的細分：
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) 進行調整）。
現在，讓我們設定 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>
說明：
在本教程中，我們在 Laravel 後端和 Vue.js 前端中使用伺服器發送事件 (SSE) 設定即時通知。 SSE 提供了一種簡單且有效率的方式來向客戶端推送即時更新，使其成為通知等功能的絕佳選擇。只需最少的設置，您就可以透過即時功能增強您的應用程式。
以上是Laravel 和 Vue.js 中伺服器發送事件 (SSE) 的即時通知的詳細內容。更多資訊請關注PHP中文網其他相關文章！
