Laravel Broadcasting and Real-time Features

Laravel's broadcasting system allows you to share server-side events with client-side JavaScript applications using WebSockets.

Setup Broadcasting

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret
PUSHER_APP_CLUSTER=your-app-cluster
Copy

Creating Broadcast Events

php artisan make:event OrderShipped
Copy

class OrderShipped implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    
    public function __construct(
        public Order $order
    ) {}
    
    public function broadcastOn()
    {
        return new PrivateChannel('orders.' . $this->order->user_id);
    }
    
    public function broadcastWith()
    {
        return [
            'order_id' => $this->order->id,
            'status' => $this->order->status,
            'message' => 'Your order has been shipped!'
        ];
    }
}
Copy

Channel Types

// Public channel
return new Channel('notifications');

// Private channel (requires authentication)
return new PrivateChannel('user.' . $this->user->id);

// Presence channel (shows who's online)
return new PresenceChannel('chat.' . $this->room->id);
Copy

Channel Authorization

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

Broadcast::channel('chat.{roomId}', function ($user, $roomId) {
    return $user->canAccessRoom($roomId) ? [
        'id' => $user->id,
        'name' => $user->name
    ] : false;
});
Copy

Client-side Listening

// Install Laravel Echo and Pusher
npm install --save laravel-echo pusher-js

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

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

// Listen for events
Echo.private('orders.' + userId)
    .listen('OrderShipped', (e) => {
        console.log('Order shipped:', e.order_id);
        showNotification(e.message);
    });
Copy

Real-time Notifications

class OrderShippedNotification extends Notification implements ShouldBroadcast
{
    public function via($notifiable)
    {
        return ['database', 'broadcast'];
    }
    
    public function toBroadcast($notifiable)
    {
        return new BroadcastMessage([
            'title' => 'Order Shipped',
            'message' => 'Your order #' . $this->order->id . ' has been shipped!'
        ]);
    }
    
    public function broadcastOn()
    {
        return new PrivateChannel('App.Models.User.' . $this->order->user_id);
    }
}
Copy

Presence Channels

// Join presence channel
Echo.join('chat.1')
    .here((users) => {
        console.log('Currently online:', users);
    })
    .joining((user) => {
        console.log(user.name + ' joined');
    })
    .leaving((user) => {
        console.log(user.name + ' left');
    })
    .listen('MessageSent', (e) => {
        console.log('New message:', e.message);
    });
Copy

Queue Broadcast Events

class OrderShipped implements ShouldBroadcast, ShouldQueue
{
    use Dispatchable, InteractsWithSockets, SerializesModels, Queueable;
    
    public $broadcastQueue = 'broadcasts';
    
    // Event implementation...
}
Copy

Broadcasting enables rich, real-time user experiences in your Laravel applications!