Building Real-Time Notifications in Laravel with WebSockets

Traditional web applications rely on a request and response cycle where clients must manually refresh the page or poll the server to check for new updates. Modern users expect applications to update instantly when a new message arrives, a payment is processed, or a background task completes.

Laravel makes implementing real-time features surprisingly straightforward through its built in event broadcasting system. Let us look at how we configure and build real-time notifications in Laravel using WebSockets and Laravel Echo.

1. Configuring Event Broadcasting

To get started with broadcasting, open your config/app.tf or service provider and ensure the BroadcastServiceProvider is uncommented. Next, configure your preferred broadcasting driver in the .env file.

For most modern production applications running without complex external dependencies, open source WebSocket servers like Reverb or Pusher compatible drivers provide seamless integration.

2. Creating a Broadcastable Event

Next, generate an event class using the artisan CLI:

php artisan make:event OrderShipped

Implement the ShouldBroadcast interface on your event class. This tells Laravel that the event should be broadcasted over your WebSocket connection whenever it is triggered inside your application logic:

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

    public $order;

    public function __construct($order)
    {
        $this->order = $order;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('orders.' . $this->order->user_id);
    }
}

3. Listening on the Frontend with Laravel Echo

On your frontend application, configure Laravel Echo to connect to your WebSocket server. You can listen to private channels and update your user interface instantly without triggering browser reloads:

window.Echo.private(`orders.${userId}`)
    .listen('OrderShipped', (e) => {
        console.log(e.order.id);
        // Display toast notification to user
    });

Final Thoughts

Integrating WebSockets into your Laravel backend transforms standard web applications into dynamic, highly engaging platforms. By leveraging event broadcasting and Laravel Echo, you can deliver instant updates while maintaining clean and maintainable code architecture.