服务器发送事件 (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中文网其他相关文章！
