Setup Reverb dan Echo

Panel mengetahui cara mendorong notifikasi dan melakukan subscription. Namun Panel tidak membawa broadcaster atau Echo client sendiri — keduanya milik aplikasi karena aplikasi mungkin sudah menggunakan Pusher, Ably, atau server Reverb yang dikelola sendiri. Halaman ini menjelaskan wiring yang dibutuhkan: apa yang harus tersedia di server, apa yang harus tersedia di browser, dan cara mengetahui sisi mana yang belum dikonfigurasi.

Contoh minimal yang berfungsi

Setup Reverb end-to-end pada aplikasi Laravel yang sudah memasang Panel:

php artisan install:broadcasting --reverb
npm install --save-dev @laravel/echo-vue pusher-js
php artisan reverb:start

Lalu konfigurasi Echo untuk client Panel di resources/js/app.ts sebelum Inertia app dibuat:

import { configureEcho } from '@laravel/echo-vue';

configureEcho({ broadcaster: 'reverb' });

npm run dev

Buka Panel dan kirim pesan dari php artisan tinker:

PandaPanel\Broadcasting\PanelNotification::dispatch(
    App\Models\User::first(),
    'Broadcasting works.',
    'success',
);

Fungsi setiap bagian

Bagian	Berada di	Dibutuhkan karena
Broadcaster (Reverb, Pusher, Ably)	config/broadcasting.php	BroadcastSupport::isConfigured() tidak mengirim channel bila tidak ada broadcaster
routes/channels.php	aplikasi	private channel ditolak tanpa authorization callback
@laravel/echo-vue	package.json	composable Panel mengimpor echo() darinya
configureEcho()	resources/js/app.ts	echo() melempar exception sampai fungsi ini dipanggil
pusher-js	package.json	diimpor langsung oleh @laravel/echo-vue sebagai transport untuk broadcaster reverb dan pusher; bundle tidak dapat dibangun tanpanya
Queue worker	php artisan queue:work	event ShouldBroadcast berjalan sebagai queued job

Sisi server

php artisan install:broadcasting adalah command bawaan Laravel. Command ini membuat routes/channels.php, mendaftarkannya di bootstrap/app.php, mem-publish config/broadcasting.php, dan menawarkan pemasangan Reverb serta dependency Node.

Kebutuhan Panel dari hasil tersebut sederhana: sebuah default connection dengan driver yang benar-benar dapat mencapai browser.

// config/broadcasting.php — the shipped fallback is 'null';
// `install:broadcasting --reverb` names reverb by writing BROADCAST_CONNECTION to .env
'default' => env('BROADCAST_CONNECTION', 'null'),

use PandaPanel\Support\BroadcastSupport;

BroadcastSupport::isConfigured();   // false for null/empty default, an undefined
                                    // connection, or a 'null'/'log' driver

.env untuk Reverb, sesuai bentuk yang ditulis install:broadcasting:

BROADCAST_CONNECTION=reverb

REVERB_APP_ID=…
REVERB_APP_KEY=…
REVERB_APP_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}"

Bagian VITE_ dibaca configureEcho(). Bagian server dibaca reverb:start.

Kemudian authorization callback, yaitu rule keamanan utama seluruh alur:

// routes/channels.php
use Illuminate\Support\Facades\Broadcast;

Broadcast::channel(
    'App.Models.User.{id}',
    static fn ($user, int|string $id): bool => hash_equals((string) $user->getAuthIdentifier(), (string) $id),
);

Nama itu bukan ciptaan Panel — itu default Laravel. PanelNotification::channelFor() sengaja membangunnya dengan format yang sama agar notifikasi dari bagian lain aplikasi juga tiba pada channel yang sudah disubscribe. Lihat Authorization channel.

Sisi browser

Panel mengimpor echo() dari @laravel/echo-vue:

import { echo } from '@laravel/echo-vue';

client.private(channel).listen('.panel.notification', (payload) => { /* … */ });

@laravel/echo-vue@^2.4.0 berada di dependency package.json package, sehingga php artisan panel:install sudah memasukkannya ke daftar npm package yang dibutuhkan aplikasi. pusher-js adalah optional peer dependency Echo sekaligus transport yang digunakan broadcaster reverb dan pusher, sehingga tetap harus dipasang.

configureEcho() harus berjalan sebelum page Panel mana pun mount. Letakkan di bagian awal resources/js/app.ts:

import { configureEcho } from '@laravel/echo-vue';
import { createInertiaApp } from '@inertiajs/vue3';

configureEcho({ broadcaster: 'reverb' });

createInertiaApp({ /* … */ });

Dengan broadcaster: 'reverb', opsi lain default ke variable VITE_REVERB_*, sehingga konfigurasi minimal cukup satu baris. Isi secara eksplisit jika setup Anda berbeda:

configureEcho({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: Number(import.meta.env.VITE_REVERB_PORT ?? 80),
    wssPort: Number(import.meta.env.VITE_REVERB_PORT ?? 443),
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

Pusher menggunakan pola yang sama dengan broadcaster berbeda:

configureEcho({ broadcaster: 'pusher' });   // reads VITE_PUSHER_APP_KEY, VITE_PUSHER_APP_CLUSTER

Jebakan window.Echo

install:broadcasting menulis resources/js/echo.js seperti ini:

window.Echo = new Echo({ broadcaster: 'reverb', /* … */ });

Panel tidak membaca window.Echo. echo() dari @laravel/echo-vue me-resolve module-level client yang hanya dibuat oleh configureEcho(), dan akan melempar exception jika fungsi itu belum pernah dijalankan — terlepas dari apa yang ada di window. Aplikasi boleh mempertahankan keduanya, tetapi Panel membutuhkan configureEcho().

Menentukan sisi mana yang belum siap

Panel sengaja tidak memaksa setup broadcasting, dan setiap kegagalan memiliki gejala yang cukup spesifik:

Gejala	Penyebab
broadcasting.enabled bernilai false pada Inertia props	broadcaster belum dikonfigurasi, atau Panel memanggil ->broadcasting(false)
broadcasting.enabled true, console development memperingatkan "[panel] Realtime notifications are off…"	configureEcho() belum dipanggil
403 dari /broadcasting/auth pada network tab	callback routes/channels.php tidak ada atau menolak user
Tidak terjadi apa pun tanpa error	queue worker tidak berjalan; job BroadcastEvent masih berada di queue

Warning khusus development layak dibaca karena menyebutkan fix secara langsung:

[panel] Realtime notifications are off: this panel has broadcasting enabled and a
broadcaster configured, but Echo was never set up in the browser. Call
configureEcho({ broadcaster: … }) in resources/js/app.ts, or turn it off with
->broadcasting(false) on the panel.

Warning hanya dicetak satu kali di development, lalu Panel tetap berjalan tanpa realtime notification. Fitur berhenti; screen tetap hidup.

Periksa jawaban server melalui test atau tinker:

use PandaPanel\Core\PanelManager;
use PandaPanel\Support\BroadcastSupport;

BroadcastSupport::isConfigured();                                  // has this app a broadcaster
app(PanelManager::class)->get('admin')->hasBroadcasting();         // does this panel want one
app(PanelManager::class)->get('admin')->getBroadcastChannel($user); // what it will subscribe to

Berjalan tanpa broadcaster

Didukung sepenuhnya dan merupakan kondisi default fresh install. SharePanelData mengirim channel: null, usePanelBroadcasting berhenti sebelum menyentuh Echo, dan tidak ada koneksi yang dicoba. Notifikasi tetap bekerja, hanya tidak realtime:

• Notifikasi ->persistent() tetap masuk ke bell; count ikut setiap request Panel.
• Flash toast tetap bekerja karena dibawa oleh response, bukan socket.

Matikan intent secara eksplisit pada Panel yang tidak akan pernah memakai broadcaster agar shared prop menyatakan kondisi tersebut secara jelas:

$panel->broadcasting(false);

Catatan production

• Jalankan Reverb menggunakan process supervisor dan jalankan queue worker di sampingnya. Broadcast adalah queued job; socket dapat tersambung tetapi tetap diam tanpa worker.
• REVERB_HOST dan VITE_REVERB_HOST biasanya adalah alamat berbeda di production: yang pertama adalah alamat yang dipakai PHP menuju server, yang kedua adalah alamat yang dihubungi browser.
• Variable VITE_ dikompilasi ke bundle. Mengubahnya membutuhkan rebuild, bukan hanya restart.
• Reverb dengan TLS di belakang proxy membutuhkan VITE_REVERB_SCHEME=https dan proxy harus dikonfigurasi untuk websocket upgrade.

Lihat juga

• Broadcasting — event dan channel
• Authorization channel — detail routes/channels.php
• Queued notifications — mengapa worker menjadi bagian setup
• Toast notifications
• Frontend requirements — npm package yang dibutuhkan Panel
• Broadcast failures
• Broadcasting server