Laravel Realtime: Reverb vs Pusher vs Ably

// resources/js/bootstrap.js — Echo connects to your chosen broadcaster
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Echo = new Echo({
    broadcaster: 'pusher',       // works with Pusher, Soketi, Ably, Reverb
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true,
});

// Listen for events on a private channel
Echo.private(`user.${userId}`)
    .notification((notification) => {
        console.log('New notification:', notification);
        showToast(notification.message);
    });

# Install Reverb (Laravel 11+)
php artisan install:broadcasting

# This installs Reverb and publishes config automatically
# .env values are set automatically too

# .env
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}"

// resources/js/bootstrap.js — Echo auto-configured for Reverb
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'],
});

// Create a broadcast event
php artisan make:event OrderStatusUpdated

<?php
// app/Events/OrderStatusUpdated.php
class OrderStatusUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

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

    // Which channel to broadcast on
    public function broadcastOn(): array
    {
        return [
            new PrivateChannel("orders.{$this->order->user_id}"),
        ];
    }

    // What data to send
    public function broadcastWith(): array
    {
        return [
            'order_id'  => $this->order->id,
            'status'    => $this->order->status,
            'message'   => "Your order #{$this->order->id} is now {$this->order->status}",
        ];
    }

    // Custom event name (optional)
    public function broadcastAs(): string
    {
        return 'order.updated';
    }
}

// Dispatch from anywhere in your app
OrderStatusUpdated::dispatch($order);

// Frontend — listen for it
Echo.private(`orders.${userId}`)
    .listen('.order.updated', (event) => {
        showNotification(`Order #${event.order_id}: ${event.message}`);
    });

# Start Reverb server
php artisan reverb:start

# In production — keep it running with Supervisor
php artisan reverb:start --host=0.0.0.0 --port=8080

# Install Firebase package
composer require kreait/laravel-firebase

# Download your service account JSON from Firebase Console
# Project Settings → Service Accounts → Generate new private key
# .env
FIREBASE_CREDENTIALS=/path/to/firebase-service-account.json

<?php
// Send a push notification via FCM
use Kreait\Firebase\Contract\Messaging;
use Kreait\Firebase\Messaging\CloudMessage;
use Kreait\Firebase\Messaging\Notification;

class NotificationService
{
    public function __construct(private Messaging $messaging) {}

    public function sendPush(string $deviceToken, string $title, string $body): void
    {
        $message = CloudMessage::withTarget('token', $deviceToken)
            ->withNotification(
                Notification::create($title, $body)
            )
            ->withData([
                'order_id' => '123',
                'type'     => 'order_update',
            ]);

        $this->messaging->send($message);
    }

    // Send to multiple devices at once
    public function sendToMultiple(array $tokens, string $title, string $body): void
    {
        $message = CloudMessage::new()
            ->withNotification(Notification::create($title, $body));

        $this->messaging->sendMulticast($message, $tokens);
    }
}

// Store device tokens when user logs in (frontend)
import { getMessaging, getToken } from 'firebase/messaging';

const messaging = getMessaging();
const token = await getToken(messaging, { vapidKey: 'YOUR_VAPID_KEY' });

// Send token to your Laravel backend
await axios.post('/api/device-token', { token });

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

# .env
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}"

# Before (Pusher)
BROADCAST_CONNECTION=pusher
PUSHER_APP_KEY=abc123...

# After (Reverb — same frontend Echo code works)
BROADCAST_CONNECTION=reverb
REVERB_APP_KEY=my-own-key

// Use ShouldBroadcastNow only if you NEED synchronous broadcasting
// Otherwise always use ShouldBroadcast (queued)
class OrderStatusUpdated implements ShouldBroadcast  // queued ✓
class OrderStatusUpdated implements ShouldBroadcastNow  // synchronous ✗ avoid

// routes/channels.php
Broadcast::channel('orders.{userId}', function ($user, $userId) {
    return (int) $user->id === (int) $userId;
});

public function notifyUser(User $user, string $message): void
{
    // WebSocket — instant if user is online
    OrderStatusUpdated::dispatch($user->id, $message);

    // FCM — delivered even if user closed the app
    if ($user->device_token) {
        $this->fcm->sendPush($user->device_token, 'Update', $message);
    }
}