Pemberitahuan Masa Nyata dengan Acara Dihantar Pelayan (SSE) dalam Laravel dan Vue.js

Acara Dihantar Pelayan (SSE) ialah penyelesaian hebat untuk mendayakan pemberitahuan atau kemas kini masa nyata dalam aplikasi anda. Tidak seperti WebSockets, SSE membenarkan komunikasi sehala dari pelayan kepada pelanggan, menjadikannya ringan dan mudah untuk dilaksanakan. Dalam tutorial ini, kami akan membincangkan cara menyediakan SSE dalam bahagian belakang Laravel dan menggunakan acara dalam bahagian hadapan Vue.js.

Gambaran keseluruhan

Kami akan mencipta sistem pemberitahuan masa nyata yang ringkas menggunakan SSE. Pelayan (Laravel) akan menolak pemberitahuan kepada klien (Vue.js) apabila terdapat pemberitahuan baharu untuk pengguna yang disahkan. Berikut ialah pecahan perkara yang akan kami bincangkan:

1. Backend (Laravel): Sediakan titik akhir SSE untuk menstrim pemberitahuan.
2. Frontend (Vue.js): Sediakan EventSource untuk mendengar pemberitahuan masuk.

Langkah 1: Bahagian Belakang (Laravel)

1.1 Buat Laluan SSE dalam Laravel

Dalam route/api.php anda, buat titik akhir untuk strim SSE. Ini akan membolehkan bahagian hadapan Vue.js anda mewujudkan sambungan SSE dan mendengar pemberitahuan.
gunakan AppHttpControllersNotificationController;

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

1.2 Kaedah Pengawal untuk Penstriman Pemberitahuan

Seterusnya, dalam NotificationController, laksanakan logik untuk mengambil pemberitahuan yang belum dibaca daripada pangkalan data dan menstrimnya kepada pelanggan melalui 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);
    }
}

Penjelasan:

Respons Penstriman: Kaedah respons()->stream() digunakan untuk menghantar aliran peristiwa yang tidak terhingga.
Pemberitahuan: Kami sedang menanyakan model Pemberitahuan untuk pemberitahuan yang belum dibaca (diklik = 0) untuk pengguna tertentu. Pemberitahuan dikodkan sebagai JSON dan dihantar kepada pelanggan.
Pengepala: Pengepala ditetapkan untuk SSE (Content-Type: text/event-stream).
Gelung Infinite: Gelung sementara (benar) memastikan sambungan terbuka dan menghantar pemberitahuan baharu secara berterusan setiap 5 saat (boleh laras dengan mengubah suai tidur(5)).

Langkah 2: Frontend (Vue.js)

Sekarang, mari sediakan bahagian hadapan Vue.js untuk mendengar pemberitahuan ini menggunakan API EventSource.

2.1. Sediakan Komponen Vue untuk Mendengar Acara SSE

Buat komponen Vue yang akan mendengar acara masuk daripada strim SSE.

<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>

Penjelasan:

1. EventSource: Kami mencipta kejadian EventSource yang mendengar titik akhir /api/notifications. Ini mewujudkan sambungan berterusan ke pelayan. onmessage: Pendengar acara ini memproses mesej masuk. Data dihuraikan daripada JSON dan ditambahkan pada tatasusunan pemberitahuan. onerror: Jika ralat berlaku (cth., jika sambungan SSE hilang), kami log ralat dan tutup sambungan.
2. beforeDestroy: Untuk mengelakkan kebocoran memori, sambungan SSE ditutup apabila komponen dimusnahkan.

Kesimpulan

Dalam tutorial ini, kami telah menyediakan pemberitahuan masa nyata menggunakan Acara Dihantar Pelayan (SSE) dalam bahagian belakang Laravel dan bahagian hadapan Vue.js. SSE menyediakan cara yang mudah dan cekap untuk menolak kemas kini masa nyata kepada pelanggan, menjadikannya pilihan yang sangat baik untuk ciri seperti pemberitahuan. Dengan persediaan yang minimum, anda boleh meningkatkan aplikasi anda dengan keupayaan masa nyata secara langsung.

Atas ialah kandungan terperinci Pemberitahuan Masa Nyata dengan Acara Dihantar Pelayan (SSE) dalam Laravel dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!