Laravel および Vue.js のサーバー送信イベント (SSE) によるリアルタイム通知

Server-Sent Events (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 用に設定されます (Content-Type: text/event-stream)。
無限ループ: while (true) ループは接続を開いたままにし、5 秒ごとに新しい通知を継続的に送信します (sleep(5) を変更することで調整可能)。

ステップ 2: フロントエンド (Vue.js)

次に、EventSource API を使用してこれらの通知をリッスンするように Vue.js フロントエンドを設定しましょう。

2.1. SSE イベントをリッスンするように Vue コンポーネントをセットアップする

SSE ストリームからの受信イベントをリッスンする Vue コンポーネントを作成します。

<template>
  <div>
    <h3 id="Unread-Notifications">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 フロントエンドで Server-Sent Events (SSE) を使用してリアルタイム通知を設定しました。 SSE は、リアルタイムの更新をクライアントにプッシュするためのシンプルかつ効率的な方法を提供するため、通知などの機能に最適です。最小限のセットアップで、ライブのリアルタイム機能でアプリケーションを強化できます。

以上がLaravel および Vue.js のサーバー送信イベント (SSE) によるリアルタイム通知の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。