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中文网其他相关文章！