Laravel Broadcasting Example

January 25, 2025 · AI Conversations

User
Laravel broadcasting example
Assistant
Laravel broadcasting allows you to send real-time events to your application's front end. Here’s a simple example of how to set up broadcasting in a Laravel application using Laravel Echo and Pusher.

### Step 1: Install Required Packages

First, you need to install the required packages. If you haven't already, you can install the following using Composer and npm:

composer require pusher/pusher-php-server
npm install --save laravel-echo pusher-js

### Step 2: Configure Broadcasting

In your `.env` file, set the broadcasting driver to `pusher` and add your Pusher credentials:

BROADCAST_DRIVER=pusher

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

### Step 3: Update `config/broadcasting.php`

Make sure the `pusher` configuration is set in `config/broadcasting.php`:

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'useTLS' => true,
    ],
],

### Step 4: Create an Event

Create an event that implements the `ShouldBroadcast` interface:

php artisan make:event MessageSent

Then update the `MessageSent` event class:

namespace AppEvents;

use IlluminateBroadcastingChannel;
use IlluminateBroadcastingInteractsWithSockets;
use IlluminateBroadcastingPrivateChannel;
use IlluminateBroadcastingPresenceChannel;
use IlluminateContractsBroadcastingShouldBroadcast;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;

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

    public $message;

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

    public function broadcastOn()
    {
        return new Channel('chat');
    }
}

### Step 5: Broadcast the Event

You can broadcast this event from a controller:

use AppEventsMessageSent;

public function sendMessage(Request $request)
{
    $message = $request->input('message');
    broadcast(new MessageSent($message));
}

### Step 6: Set Up Frontend with Laravel Echo

In your JavaScript (e.g., in `resources/js/app.js`), set up Laravel Echo to listen for the event:

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

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-app-key',
    cluster: 'your-pusher-app-cluster',
    encrypted: true,
});

Echo.channel('chat')
    .listen('MessageSent', (e) => {
        console.log(e.message);
    });

### Step 7: Compile Assets

Make sure to compile your assets using:

npm run dev

### Step 8: Test the Broadcast

When you call the `sendMessage` method, it will broadcast the `MessageSent` event, and any listeners on the front end should log the message to the console.

### Summary

This is a basic example of how to set up Laravel broadcasting with Pusher. You can customize it further by adding authentication, using private channels, and handling different events based on your application's requirements.

User
Use queue
Assistant
To implement Laravel broadcasting with queues, you'll modify the setup to ensure that broadcasting events are dispatched to a queue instead of being handled immediately. This is especially useful for handling high loads or long-running processes without delaying the response time of your application.

Here’s how to set it up:

### Step 1: Set Up Queues

Make sure you have your queue driver set up in the `.env` file. For example, if you're using the database driver:

QUEUE_CONNECTION=database

Then run the following command to create the necessary table:

php artisan queue:table
php artisan migrate

### Step 2: Update the Event

In your `MessageSent` event, you need to make it implement the `ShouldQueue` interface in addition to `ShouldBroadcast`. Update your event class like this:

namespace AppEvents;

use IlluminateBroadcastingChannel;
use IlluminateBroadcastingInteractsWithSockets;
use IlluminateBroadcastingPrivateChannel;
use IlluminateBroadcastingPresenceChannel;
use IlluminateContractsBroadcastingShouldBroadcast;
use IlluminateContractsQueueShouldQueue; // Import the ShouldQueue interface
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;

class MessageSent implements ShouldBroadcast, ShouldQueue // Implement ShouldQueue here
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

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

    public function broadcastOn()
    {
        return new Channel('chat');
    }
}

### Step 3: Broadcast the Event with a Queue

In your controller, you can still broadcast the event the same way. Laravel will automatically queue the event for broadcasting:

use AppEventsMessageSent;

public function sendMessage(Request $request)
{
    $message = $request->input('message');
    broadcast(new MessageSent($message)); // This will be queued
}

### Step 4: Start the Queue Worker

To process the queued events, you need to run a queue worker. Use the following command in your terminal:

php artisan queue:work

### Step 5: Frontend Setup

The frontend setup remains the same as in the previous example. You’ll still be using Laravel Echo to listen for the event:

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

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-app-key',
    cluster: 'your-pusher-app-cluster',
    encrypted: true,
});

Echo.channel('chat')
    .listen('MessageSent', (e) => {
        console.log(e.message);
    });

### Step 6: Testing

Now, when you call the `sendMessage` method, the `MessageSent` event will be dispatched to the queue, and the queue worker will handle it in the background, broadcasting the event when it processes the job.

### Summary

This setup allows you to handle broadcasting events asynchronously using Laravel's queue system. It helps to improve the responsiveness of your application by offloading the broadcasting task to a background process. Make sure you monitor your queue workers and handle failures appropriately to ensure messages are delivered as expected.

Leave a Comment

Your email address will not be published. Required fields are marked *