Master Real‑Time Laravel Event Broadcasting with WebSockets

Introduction

WebSockets provide a reliable, efficient way to push real‑time updates from the server to the client, avoiding constant polling. Laravel simplifies this with its broadcasting feature, allowing you to share the same event names between backend code and JavaScript applications.

Configuration

All broadcasting settings reside in config/broadcasting.php. Laravel ships with drivers for Pusher , Redis , a local log driver, and a null driver to disable broadcasting.

Broadcast Service Provider

Register App\Providers\BroadcastServiceProvider in the providers array of config/app.php. This provider registers broadcast routes and callbacks.

CSRF Token

Laravel Echo requires the CSRF token from a meta tag in the page header:

<meta name="csrf-token" content="{{ csrf_token() }}">

Driver Setup

Pusher

Install the SDK:

composer require pusher/pusher-php-server "~3.0"

Configure config/broadcasting.php with your Pusher key, secret, and app ID, and optionally set options such as cluster and encrypted:

'options' => [
    'cluster' => 'eu',
    'encrypted' => true,
],

Instantiate Echo with Pusher:

import Echo from "laravel-echo";
window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-key',
});

Redis

Install Predis: composer require predis/predis Redis broadcasts events as JSON strings containing the event name, data, and socket ID. It must be paired with a WebSocket server that reads from Redis and forwards messages to clients.

Socket.IO

Include the Socket.IO client script:

<script src="//{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script>

Instantiate Echo with the Socket.IO connector:

import Echo from "laravel-echo";
window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
});

Use a community‑maintained server such as tlaverdure/laravel-echo-server on GitHub.

Queue Requirements

Broadcasting is performed by queued jobs, so a queue listener must be running. This keeps HTTP responses fast.

Defining Broadcast Events

Implement Illuminate\Contracts\Broadcasting\ShouldBroadcast (or ShouldBroadcastNow for immediate dispatch) on your event class. Example:

<?php
namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class ShippingStatusUpdated implements ShouldBroadcast
{
    public $update;

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

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

The broadcastOn method defines the channel(s) the event will be sent to. Private channels require authorization.

Channel Authorization

Define authorization callbacks in routes/channels.php:

Broadcast::channel('order.{orderId}', function ($user, $orderId) {
    return $user->id === Order::findOrNew($orderId)->user_id;
});

You can also create a dedicated channel class with php artisan make:channel OrderChannel and register it:

use App\Broadcasting\OrderChannel;
Broadcast::channel('order.{order}', OrderChannel::class);

Listening on the Frontend

Use Laravel Echo to listen for events:

Echo.private(`order.${orderId}`)
    .listen('ShippingStatusUpdated', e => {
        console.log(e.update);
    });

Custom Broadcast Names and Data

Override the default class‑name broadcast name by adding a broadcastAs method:

public function broadcastAs()
{
    return 'server.created';
}

Control the payload with broadcastWith:

public function broadcastWith()
{
    return ['id' => $this->user->id];
}

Conditional Broadcasting

Implement broadcastWhen to broadcast only when a condition is true:

public function broadcastWhen()
{
    return $this->value > 100;
}

Queue Customization

Set a custom queue name with the $broadcastQueue property, or use ShouldBroadcastNow for synchronous broadcasting.

Summary

By configuring the appropriate driver, defining event classes, setting up channel authorization, and using Laravel Echo on the client side, you can build robust real‑time features in Laravel applications without resorting to manual polling.