Laravel Broadcasting: Real-time Events

# Install Reverb (first-party WebSocket server)
php artisan install:broadcasting

# This installs reverb, publishes config/reverb.php,
# and sets BROADCAST_CONNECTION=reverb in .env

# Install frontend dependencies
npm install --save-dev laravel-echo
npm install --save pusher-js  # Reverb uses Pusher protocol

# Start Reverb server (separate terminal)
php artisan reverb:start

# Start queue worker (events are queued by default)
php artisan queue:work

BROADCAST_CONNECTION=reverb

REVERB_APP_ID=my-app-id
REVERB_APP_KEY=my-app-key
REVERB_APP_SECRET=my-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}"

# Install Pusher PHP SDK
composer require pusher/pusher-php-server

# .env settings
BROADCAST_CONNECTION=pusher
PUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret
PUSHER_APP_CLUSTER=mt1

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

php artisan make:event OrderStatusUpdated

<?php

namespace App\Events;

use App\Models\Order;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class OrderStatusUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function __construct(public Order $order)
    {
        //
    }

    /**
     * Channels this event should broadcast on.
     * PrivateChannel requires the subscriber to be authorized.
     */
    public function broadcastOn(): array
    {
        return [
            new PrivateChannel('orders.' . $this->order->id),
        ];
    }

    /**
     * Override the event name seen by the frontend.
     * Default would be "App\\Events\\OrderStatusUpdated".
     */
    public function broadcastAs(): string
    {
        return 'order.updated';
    }

    /**
     * Customize the payload sent to the frontend.
     * By default, all public properties are included.
     */
    public function broadcastWith(): array
    {
        return [
            'id'     => $this->order->id,
            'status' => $this->order->status,
            'total'  => $this->order->total,
        ];
    }

    /**
     * Conditional broadcasting — only fire when truly changed.
     */
    public function broadcastWhen(): bool
    {
        return $this->order->wasChanged('status');
    }
}

public function updateStatus(Request $request, Order $order): JsonResponse
{
    $order->update(['status' => $request->status]);

    // This queues the broadcast — non-blocking
    OrderStatusUpdated::dispatch($order);

    return response()->json(['message' => 'Status updated']);
}

public function broadcastOn(): array
{
    return [
        new Channel('announcements'),
    ];
}

<?php

use App\Models\Order;
use Illuminate\Support\Facades\Broadcast;

// Private channel: user can only subscribe to their own orders
Broadcast::channel('orders.{orderId}', function ($user, $orderId) {
    $order = Order::find($orderId);
    return $order && $order->user_id === $user->id;
});

// Private channel: only admins can subscribe
Broadcast::channel('admin.dashboard', function ($user) {
    return $user->hasRole('admin');
});

// Using a Gate policy for cleaner authorization
Broadcast::channel('orders.{order}', function ($user, Order $order) {
    return $user->can('view', $order);
});

// Return user data (not just true/false) for presence channels
Broadcast::channel('chat.{roomId}', function ($user, $roomId) {
    if ($user->canJoinRoom($roomId)) {
        // Returned array is shared with all members in the channel
        return [
            'id'     => $user->id,
            'name'   => $user->name,
            'avatar' => $user->avatar_url,
        ];
    }
});

// Presence event
class UserJoinedRoom implements ShouldBroadcast
{
    public function broadcastOn(): array
    {
        return [
            new PresenceChannel('chat.' . $this->roomId),
        ];
    }
}

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'],
});

// Public channel — no auth required
Echo.channel('announcements')
    .listen('AnnouncementPublished', (e) => {
        console.log('New announcement:', e.title);
        showToast(e.title, e.message);
    });

// Private channel — server authorizes via routes/channels.php
// broadcastAs() name used here with leading dot
Echo.private(`orders.${orderId}`)
    .listen('.order.updated', (e) => {
        document.getElementById('order-status').textContent = e.status;
        updateProgressBar(e.status);
    });

// Presence channel — membership events included
Echo.join(`chat.${roomId}`)
    .here((members) => {
        // Called immediately with current member list
        updateOnlineList(members);
    })
    .joining((member) => {
        // Called when a new user joins
        addToOnlineList(member);
        showSystemMessage(`${member.name} joined`);
    })
    .leaving((member) => {
        // Called when a user disconnects
        removeFromOnlineList(member.id);
    })
    .listen('MessageSent', (e) => {
        appendMessage(e.user, e.message);
    })
    .whisper('typing', { name: currentUser.name });  // client-only events

<?php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Messages\BroadcastMessage;
use Illuminate\Notifications\Notification;

class InvoicePaid extends Notification
{
    use Queueable;

    public function __construct(private readonly float $amount) {}

    public function via($notifiable): array
    {
        // Send both email and real-time broadcast
        return ['mail', 'broadcast'];
    }

    public function toBroadcast($notifiable): BroadcastMessage
    {
        return new BroadcastMessage([
            'amount'  => $this->amount,
            'message' => "Your invoice of \${$this->amount} has been paid.",
        ]);
    }
}

// Laravel maps this to the authenticated user's private channel automatically
Echo.private(`App.Models.User.${userId}`)
    .notification((notification) => {
        if (notification.type === 'App\\Notifications\\InvoicePaid') {
            showNotificationBadge(notification.message);
        }
    });

[program:reverb]
command=php /var/www/myapp/artisan reverb:start --host=0.0.0.0 --port=8080
autostart=true
autorestart=true
user=www-data
redirect_stderr=true
stdout_logfile=/var/log/supervisor/reverb.log

server {
    listen 443 ssl;
    server_name myapp.com;

    # Proxy WebSocket connections to Reverb
    location /app/ {
        proxy_pass             http://127.0.0.1:8080;
        proxy_http_version     1.1;
        proxy_set_header       Upgrade $http_upgrade;
        proxy_set_header       Connection "Upgrade";
        proxy_set_header       Host $host;
        proxy_read_timeout     60s;
    }
}