Belajar Laravel - Reverb: WebSocket Real-Time

#Pendahuluan

Sejak episode 15 kita me-broadcast event, tapi belum menghubungkannya ke browser. Di episode ini kita lengkapi: aplikasi yang bisa push data ke user secara real-time — notifikasi muncul tanpa refresh, chat terkirim seketika, status "online" terlihat langsung.

Jawaban Laravel untuk ini adalah Reverb — WebSocket server resmi yang sejak Laravel 13 hadir dengan driver database tanpa Redis. Ini mengubah permainan untuk aplikasi menengah yang tidak ingin memelihara infrastruktur tambahan.

#Arsitektur Broadcasting

Alurnya: aplikasi me-broadcast sebuah event → Reverb menerima dan menyiarkannya ke channel → client yang subscribe channel tersebut menerima update instan. Server tidak perlu di-polling.

#Instalasi dan Konfigurasi Reverb

composer require laravel/reverb
php artisan reverb:install

Reverb adalah server terpisah dari aplikasi — jalankan di terminal lain:

php artisan reverb:start

Default Reverb berjalan di port 8080. Konfigurasi di .env:

BROADCAST_CONNECTION=reverb
REVERB_SERVER_HOST=127.0.0.1
REVERB_SERVER_PORT=8080
REVERB_APP_ID=local-app
REVERB_APP_KEY=your-app-key
REVERB_APP_SECRET=your-app-secret

Jangan lupa aktifkan broadcasting di config/broadcasting.php (default sudah ke reverb setelah install).

#Broadcast Driver: Redis vs DB (Fitur v13)

Untuk meneruskan event dari aplikasi ke Reverb, Laravel memakai "broadcast driver":

Reverb DB driver — fitur baru Laravel 13 — menyimpan event broadcast ke tabel database dan Reverb membacanya, sehingga tidak perlu Redis:

php artisan reverb:install --db
php artisan migrate

BROADCAST_CONNECTION=reverb
REVERB_DRIVER=db

#Membuat Event yang Di-broadcast

Event yang di-broadcast mengimplementasikan ShouldBroadcast (sudah kita lihat sekilas di episode 15):

<?php
 
namespace App\Events;
 
use App\Models\Post;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
 
class NewPostPublished implements ShouldBroadcast
{
    use Dispatchable, SerializesModels;
 
    public function __construct(
        public Post $post,
    ) {
    }
 
    public function broadcastOn(): array
    {
        return ['posts'];
    }
}

Trigger dari mana saja:

use App\Events\NewPostPublished;
 
event(new NewPostPublished($post));

#Client dengan Laravel Echo

Di sisi browser, install Echo + pusher-js (client WebSocket):

npm install --save laravel-echo pusher-js

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
 
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,
    forceTLS: false,
    enabledTransports: ['ws', 'wss'],
});

Subscribe channel dan dengarkan event:

Echo.channel('posts')
    .listen('NewPostPublished', (e) => {
        showToast(`Post baru: ${e.post.title}`);
    });

Sekarang, ketika event(new NewPostPublished($post)) dijalankan di server, semua browser yang membuka channel posts langsung mendapat notifikasi — tanpa polling, tanpa reload.

#Notifikasi Real-Time

Kombinasi notifications + broadcast = notifikasi yang muncul instan:

public function via(object $notifiable): array
{
    return ['mail', 'database', 'broadcast'];
}
 
public function toBroadcast(object $notifiable): array
{
    return [
        'title' => $this->post->title,
    ];
}

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

Echo.private('App.Models.User.' + id) adalah konvensi channel per-user di Laravel — notifikasi database otomatis di-broadcast ke channel ini.

#Penutup

Inti yang harus dibawa pulang:

• Reverb adalah WebSocket server resmi Laravel; jalankan dengan reverb:start.
• Broadcast driver: redis untuk skala besar, Reverb DB driver (v13) tanpa Redis.
• Event ShouldBroadcast di-broadcast ke channel; client mendengarkan lewat Echo.
• Notifikasi per-user memakai private channel (App.Models.User.{id}).
• Kanal publik untuk berita umum; private channel untuk data pribadi.

Di episode 20 selanjutnya kita akan membahas fitur modern Laravel 13 — Laravel AI SDK, PHP Attributes untuk model/controller/job, Cache::touch(), perbaikan performa, dan cara upgrade dari Laravel 12. Sampai jumpa di episode 20!