Cara Membuat Notifikasi Realtime Laravel Menggunakan Reverb

Apa Itu Laravel Reverb?

Laravel Reverb adalah WebSocket server yang dibuat untuk terintegrasi dengan fitur event broadcasting Laravel.

Dengan Reverb, server dapat mengirim data langsung menuju browser ketika terjadi perubahan pada aplikasi.

Contohnya:

Admin membuat transaksi
↓
Laravel memproses transaksi
↓
Notification dikirim melalui Reverb
↓
Browser menerima data
↓
Notifikasi muncul tanpa refresh

WebSocket cocok digunakan untuk antarmuka yang membutuhkan pembaruan data secara realtime tanpa melakukan polling terus-menerus ke server.

Beberapa fitur yang dapat dibuat menggunakan Reverb:

1. Notifikasi transaksi.

2. Notifikasi pembayaran.

3. Chat realtime.

4. Status pesanan.

5. Dashboard monitoring.

6. Update stok.

7. Notifikasi pasien atau antrean.

8. Update status pekerjaan.

1. Install Laravel Reverb

Pada Laravel modern, cara paling sederhana adalah menjalankan:

php artisan install:broadcasting --reverb

Perintah tersebut memasang kebutuhan broadcasting Reverb, termasuk package yang diperlukan serta konfigurasi environment untuk aplikasi.

Alternatif instalasi manual:

composer require laravel/reverb

Kemudian:

php artisan reverb:install

Laravel akan membuat atau memperbarui konfigurasi broadcasting dan Reverb.

2. Periksa Konfigurasi .env

Setelah instalasi, periksa file .env.

Contoh:

BROADCAST_CONNECTION=reverb

REVERB_APP_ID=my-app
REVERB_APP_KEY=my-key
REVERB_APP_SECRET=my-secret

REVERB_HOST=localhost
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

Reverb menggunakan application ID, key, dan secret untuk memverifikasi hubungan antara client dan server WebSocket.

Setelah mengubah konfigurasi:

php artisan optimize:clear

3. Jalankan Reverb Server

Untuk development:

php artisan reverb:start

Secara default, Reverb berjalan pada:

0.0.0.0:8080

Port dapat diubah menggunakan opsi --host dan --port.

Contohnya:

php artisan reverb:start --host=127.0.0.1 --port=9000

Untuk melihat aktivitas WebSocket:

php artisan reverb:start --debug

Mode debug berguna untuk melihat koneksi dan pesan yang melewati Reverb.

4. Jalankan Queue Worker

Broadcast event dan broadcast notification Laravel menggunakan queue sehingga aplikasi sebaiknya menjalankan queue worker.

Jalankan:

php artisan queue:work

Saat development, biasanya Anda menjalankan:

Terminal 1
php artisan serve

Terminal 2
php artisan reverb:start

Terminal 3
php artisan queue:work

Terminal 4
npm run dev

Dengan demikian:

Laravel
+
Queue
+
Reverb
+
Vite

berjalan secara bersamaan.

5. Install Laravel Echo

Jika instalasi Reverb dilakukan menggunakan install:broadcasting, konfigurasi Echo biasanya sudah dipersiapkan.

Jika ingin memasangnya secara manual:

npm install --save-dev laravel-echo pusher-js

Reverb menggunakan protokol Pusher untuk WebSocket subscriptions, channel, dan message sehingga frontend menggunakan laravel-echo serta pusher-js.

6. Konfigurasi Laravel Echo

Buka:

resources/js/app.js

Tambahkan:

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',

    key: import.meta.env.VITE_REVERB_APP_KEY,

    wsHost: import.meta.env.VITE_REVERB_HOST,

    wsPort:
        import.meta.env.VITE_REVERB_PORT ?? 80,

    wssPort:
        import.meta.env.VITE_REVERB_PORT ?? 443,

    forceTLS:
        (import.meta.env.VITE_REVERB_SCHEME ?? 'https')
        === 'https',

    enabledTransports: [
        'ws',
        'wss',
    ],
});

Konfigurasi tersebut merupakan pola konfigurasi Laravel Echo untuk Reverb yang digunakan Laravel saat ini.

Kemudian jalankan:

npm run dev

Untuk production:

npm run build

7. Membuat Notification

Jalankan:

php artisan make:notification OrderCreatedNotification

Laravel akan membuat:

app/Notifications/OrderCreatedNotification.php

Laravel Notification mendukung beberapa channel, termasuk broadcast, sehingga notification dapat dikirim langsung menuju frontend melalui broadcasting.

Contoh:

<?php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\BroadcastMessage;
use Illuminate\Notifications\Notification;

class OrderCreatedNotification extends Notification implements ShouldQueue
{
    use Queueable;

    public function __construct(
        public int $orderId,
        public string $customerName,
        public int $total
    ) {
    }

    public function via(object $notifiable): array
    {
        return [
            'broadcast',
        ];
    }

    public function toBroadcast(
        object $notifiable
    ): BroadcastMessage {
        return new BroadcastMessage([
            'order_id' => $this->orderId,
            'customer_name' => $this->customerName,
            'total' => $this->total,
            'message' => 'Pesanan baru masuk.',
        ]);
    }

    public function broadcastType(): string
    {
        return 'order.created';
    }
}

Method toBroadcast() menentukan data JSON yang dikirimkan menuju frontend. Laravel juga mengizinkan tipe notification diubah menggunakan broadcastType().

8. Kirim Notification ke User

Pastikan model User menggunakan trait:

use Illuminate\Notifications\Notifiable;

Contohnya:

class User extends Authenticatable
{
    use Notifiable;
}

Kemudian kirim notification:

$user->notify(
    new OrderCreatedNotification(
        orderId: $order->id,
        customerName: $order->customer_name,
        total: $order->grand_total,
    )
);

Notification dapat dipanggil setelah transaksi berhasil dibuat.

Contohnya:

$order = Order::create([
    'customer_name' => $request->customer_name,
    'grand_total' => $request->grand_total,
]);

$admin->notify(
    new OrderCreatedNotification(
        $order->id,
        $order->customer_name,
        $order->grand_total,
    )
);

9. Mendengarkan Notification di Frontend

Broadcast notification Laravel dikirim melalui private channel dengan format:

App.Models.User.{id}

Sebagai contoh, user dengan ID 5 menggunakan channel:

App.Models.User.5

Laravel Echo menyediakan method .notification() untuk menerima data tersebut.

Contohnya:

const userId = window.authUserId;

window.Echo
    .private(`App.Models.User.${userId}`)
    .notification((notification) => {
        console.log(notification);

        alert(notification.message);
    });

Sekarang ketika Laravel menjalankan:

$user->notify(...);

browser pengguna tersebut akan menerima notification secara realtime.

10. Menampilkan Toast Notification

Daripada menggunakan:

alert()

Anda dapat menggunakan library seperti SweetAlert, Toastify, atau komponen notification sendiri.

Contoh sederhana menggunakan JavaScript:

window.Echo
    .private(`App.Models.User.${userId}`)
    .notification((notification) => {

        const container =
            document.getElementById(
                'notification-container'
            );

        const element =
            document.createElement('div');

        element.className =
            'notification-item';

        element.innerHTML = `
            <strong>Notifikasi Baru</strong>
            <p>${notification.message}</p>
        `;

        container.prepend(element);
    });

HTML:

<div id="notification-container"></div>

Dengan cara tersebut, notification akan langsung muncul pada halaman tanpa reload.

11. Menambahkan Suara Notification

Tambahkan audio:

<audio
    id="notification-sound"
    src="/sounds/notification.mp3">
</audio>

Kemudian:

window.Echo
    .private(`App.Models.User.${userId}`)
    .notification((notification) => {

        document
            .getElementById(
                'notification-sound'
            )
            ?.play();

        console.log(notification);
    });

Perlu diperhatikan bahwa browser dapat membatasi pemutaran audio otomatis sebelum pengguna melakukan interaksi pada halaman.

12. Menyimpan Notification ke Database

Realtime notification dapat digabungkan dengan database notification.

Ubah:

public function via(object $notifiable): array
{
    return [
        'broadcast',
        'database',
    ];
}

Tambahkan:

public function toArray(
    object $notifiable
): array {
    return [
        'order_id' => $this->orderId,
        'customer_name' => $this->customerName,
        'total' => $this->total,
        'message' => 'Pesanan baru masuk.',
    ];
}

Dengan cara ini:

Realtime
+
Database

dapat digunakan secara bersamaan.

Laravel memang menyediakan notification channel untuk database dan broadcast.

13. Contoh Badge Notification

Misalnya terdapat icon lonceng:

<button>
    🔔
    <span id="notification-count">
        0
    </span>
</button>

JavaScript:

let notificationCount = 0;

window.Echo
    .private(`App.Models.User.${userId}`)
    .notification((notification) => {

        notificationCount++;

        document
            .getElementById(
                'notification-count'
            )
            .textContent =
                notificationCount;
    });

Setiap notification baru masuk, angka badge akan bertambah.

14. Menggunakan Event Realtime

Selain Notification, Reverb juga dapat menggunakan Laravel Event.

Buat:

php artisan make:event OrderStatusUpdated

Event perlu mengimplementasikan:

ShouldBroadcast

Contohnya:

<?php

namespace App\Events;

use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class OrderStatusUpdated implements ShouldBroadcast
{
    public function __construct(
        public int $orderId,
        public string $status
    ) {
    }

    public function broadcastOn(): array
    {
        return [
            new PrivateChannel(
                'orders.'.$this->orderId
            ),
        ];
    }
}

Laravel menggunakan ShouldBroadcast untuk menandai event yang harus dikirimkan melalui broadcasting. Channel dapat berupa public Channel, PrivateChannel, atau PresenceChannel.

Kirim event:

event(
    new OrderStatusUpdated(
        $order->id,
        $order->status
    )
);

Frontend:

window.Echo
    .private(`orders.${orderId}`)
    .listen(
        'OrderStatusUpdated',
        (event) => {
            console.log(event.status);
        }
    );

Notification vs Event

Gunakan Notification ketika ingin mengirim informasi kepada pengguna tertentu.

Contohnya:

Invoice sudah dibayar
Pesanan baru masuk
Stok hampir habis
Pasien baru mendaftar

Gunakan Event ketika ingin mengirim perubahan kondisi aplikasi.

Contohnya:

Status order berubah
Stok berubah
Antrian berubah
Dashboard berubah
Chat baru masuk

Keduanya dapat menggunakan Reverb sebagai transport WebSocket.

Private Channel dan Keamanan

Notification pengguna menggunakan private channel sehingga browser perlu melakukan autentikasi sebelum dapat bergabung.

Laravel menyediakan authorization callback untuk channel notification pengguna pada routes/channels.php.

Untuk channel custom, contoh authorization:

use Illuminate\Support\Facades\Broadcast;

Broadcast::channel(
    'orders.{orderId}',
    function ($user, $orderId) {
        return $user->orders()
            ->whereKey($orderId)
            ->exists();
    }
);

Private channel harus memeriksa apakah pengguna benar-benar diperbolehkan menerima data tersebut.

Jangan menggunakan public channel untuk data seperti transaksi, pembayaran, pasien, atau informasi pelanggan.

Reverb di Production

Reverb merupakan proses yang berjalan terus-menerus sehingga pada server production sebaiknya dijalankan menggunakan process manager seperti Supervisor. Laravel juga menyediakan reverb:restart untuk menghentikan koneksi secara aman sebelum proses dijalankan kembali oleh process manager.

Contoh restart:

php artisan reverb:restart

Untuk production biasanya arsitekturnya:

Browser
↓
WSS / HTTPS
↓
Nginx
↓
Laravel Reverb :8080
↓
Laravel Application

Laravel menjelaskan bahwa koneksi WebSocket aman pada production umumnya ditangani oleh web server seperti Nginx sebelum diteruskan menuju Reverb.

Allowed Origins

Batasi domain yang boleh terhubung menuju Reverb.

Konfigurasi terdapat pada:

config/reverb.php

Contohnya:

'allowed_origins' => [
    'example.com',
],

Request dari origin yang tidak berada pada daftar dapat ditolak oleh Reverb.

Hindari:

'allowed_origins' => ['*']

pada production jika tidak benar-benar diperlukan.

Error yang Sering Terjadi

WebSocket Tidak Connect

Periksa:

REVERB_HOST
REVERB_PORT
REVERB_SCHEME

Kemudian jalankan:

php artisan reverb:start --debug

Notification Tidak Muncul

Pastikan:

php artisan queue:work

sedang berjalan karena broadcast notification menggunakan queue.

Perubahan JavaScript Tidak Terlihat

Jalankan:

npm run dev

atau:

npm run build

Perubahan Konfigurasi Reverb Tidak Terbaca

Restart Reverb:

php artisan reverb:restart

Reverb merupakan proses jangka panjang sehingga perubahan kode atau konfigurasi tertentu membutuhkan restart proses.

Private Channel Menghasilkan 403

Periksa:

routes/channels.php

Pastikan user memiliki izin untuk bergabung ke channel.

Contoh Penggunaan Reverb untuk Bisnis

Laravel Reverb dapat digunakan pada:

Point of Sales

Kasir menerima notification ketika transaksi atau pembayaran masuk.

Sistem Inventory

Dashboard langsung berubah ketika stok masuk, keluar, atau ditransfer.

Klinik

Petugas mendapatkan notification ketika pasien baru melakukan pendaftaran.

Marketplace

Seller menerima notification ketika pesanan baru masuk.

Dashboard Monitoring

Data dapat diperbarui tanpa pengguna melakukan refresh.

Chat Internal

Pesan langsung muncul ke pengguna atau departemen tertentu.

Checklist Implementasi Reverb

Sebelum digunakan, pastikan:

1. Reverb sudah terinstall.

2. BROADCAST_CONNECTION=reverb.

3. Reverb server berjalan.

4. Queue worker berjalan.

5. Laravel Echo terinstall.

6. Konfigurasi Vite benar.

7. Private channel sudah dilindungi.

8. Notification menggunakan channel broadcast.

9. Frontend mendengarkan channel yang tepat.

10. WebSocket production menggunakan koneksi aman.

11. Allowed Origins sudah dibatasi.

12. Reverb dijalankan menggunakan process manager pada production.

Pengembangan Sistem Realtime Bersama Ovla Media

Ovla Media dapat membantu mengembangkan sistem realtime menggunakan Laravel Reverb untuk kebutuhan:

1. Point of Sales.

2. Inventory.

3. Sistem klinik.

4. Dashboard monitoring.

5. Marketplace.

6. CRM.

7. Sistem multi-cabang.

8. Chat internal.

9. Notifikasi pembayaran.

10. Aplikasi bisnis custom.

Sistem realtime dapat dikombinasikan dengan Laravel Queue, WhatsApp API, role dan permission, dashboard, serta aplikasi multi-cabang.

Kesimpulan

Laravel Reverb memungkinkan aplikasi Laravel menggunakan komunikasi WebSocket realtime tanpa harus menggunakan layanan WebSocket eksternal.

Implementasi dasarnya terdiri dari:

Laravel
↓
Notification / Event
↓
Queue
↓
Reverb
↓
Laravel Echo
↓
Browser

Instalasi dapat dimulai dengan:

php artisan install:broadcasting --reverb

Kemudian jalankan:

php artisan reverb:start
php artisan queue:work
npm run dev

Notification dapat dikirim melalui channel:

'broadcast'

dan diterima frontend menggunakan:

Echo
    .private(`App.Models.User.${userId}`)
    .notification((notification) => {
        console.log(notification);
    });

Dengan Reverb, aplikasi dapat menampilkan perubahan data, notifikasi, transaksi, chat, dan dashboard secara realtime tanpa pengguna melakukan refresh halaman.