Step-by-Step Guide: Setting Up Broadcasting with Pusher in Laravel

Are you looking to incorporate real-time broadcasting into your Laravel application? Look no further! In this step-by-step guide, we will walk you through the process of setting up broadcasting with Pusher in Laravel. Broadcasting allows you to push server-side events to your users in real time, enabling a more interactive and responsive application. Whether you want to build a live chat feature or display real-time notifications, this guide will help you get started with broadcasting using Pusher in Laravel. So, let’s dive in and enhance the real-time functionality of your Laravel application!

Step 1: Installing Pusher in Laravel

First, navigate to your Laravel project folder in the command line. This step is important as it allows you to access your project files and make the necessary changes. Once you are in the project folder, you can proceed to the next step. Use Composer to install the Pusher package by running the command:

composer require pusher/pusher-php-server.

Composer is a dependency management tool for PHP, and it will automatically download and install the Pusher package for you. This package contains the necessary files and functions that enable you to work with Pusher in Laravel. After the installation is complete, open your project’s .env file. The .env file contains important configuration settings for your Laravel application. In this case, we need to add our Pusher credentials to the .env file. This is done by filling in the following value

PUSHER_APP_ID=your-pusher-app-id

PUSHER_APP_KEY=your-pusher-key

PUSHER_APP_SECRET=your-pusher-secret

PUSHER_APP_CLUSTER=your-pusher-cluster

These credentials are unique to your Pusher account and are required for authentication and message broadcasting. You will get these credentials after taking an account at https://pusher.com/. Remember to save the changes you made to the .env file before proceeding to the next step.

Step 2: Configuring Broadcasting in Laravel

The next step is to configure broadcasting. Broadcasting allows the server to send real-time data to the clients using web sockets. To configure broadcasting in Laravel, open the .env file and set the

BROADCAST_DRIVER=pusher

This tells Laravel to use Pusher as the broadcasting driver for your application.

Finally, open the config/app.php file and uncomment

App\Providers\BroadcastServiceProvider::class,

You will also need to configure and run a queue worker. All event broadcasting is done via queued jobs so that the response time of your application is not seriously affected by events being broadcast. You will also need to configure and run a queue worker. All event broadcasting is done via queued jobs so that the response time of your application is not seriously affected by events being broadcast. By completing these steps, you will have successfully configured broadcasting with Pusher in Laravel, allowing real-time communication between the server and clients.

Step 3: Setting Up Events in Laravel

To set up events run the following command

php artisan make:event MessageEvent

This will create a MessageEvent Class make sure it implements Illuminate\Contracts\Broadcasting\ShouldBroadcastinterface

My Event class looks like the following:

<?php

namespace App\Events;

use App\Models\User;

use Illuminate\Broadcasting\Channel;

use Illuminate\Broadcasting\InteractsWithSockets;

use Illuminate\Broadcasting\PresenceChannel;

use Illuminate\Broadcasting\PrivateChannel;

use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

use Illuminate\Foundation\Events\Dispatchable;

use Illuminate\Queue\SerializesModels;

class MessageEvent implements ShouldBroadcast

{

    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**

     * Create a new event instance.

     */

    public function __construct(public User $user, public string $message = '')

    {

    }

    /**

     * Get the channels the event should broadcast on.

     *

     * @return array<int, \Illuminate\Broadcasting\Channel>

     */

    public function broadcastOn(): array

    {

        return [

            new PrivateChannel('message-channel.' . $this->user->id),

        ];

    }

}

Declare the properties as public which you want to use in the front-end side.

The new PrivateChannel(‘message-channel.’ . $this→user→id), this is the channel name which you would use in the channels.php file for broadcasting

Step 4: Creating Channels and Broadcasting Messages with Pusher

This is a simple process open channels.php file in the routes directory and add the following code

Broadcast::channel(‘message-channel.{id}’, function (User $user, $id) {

    return $user->id == $id;

});

This channel will be only available for the user id which is equal to the value in the $id  variable. And the value of this $id will be value from the user id mentioned in the MessageEvent class

Step 5: Configuring and installing pusher in client side

To configure Pusher in the client-side, you first need to include the Pusher JavaScript library in your project. This library allows you to interact with the Pusher service and enables real-time communication. Next, you will need to create a new instance of the Pusher object by passing your Pusher app key as the argument. This app key can be obtained from your Pusher account dashboard. By following these steps, you will be able to configure Pusher in the client-side and utilize its broadcasting capabilities in your Laravel application.

npm install --save-dev laravel-echo pusher-js

uncomment the following lines in resources/js/bootstrap.js

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({

    broadcaster: 'pusher',

    key: import.meta.env.VITE_PUSHER_APP_KEY,

    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',

    wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,

    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,

    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,

    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',

    enabledTransports: ['ws', 'wss'],

});

create vue or blade file according to your project, I 'm using laravel vue with interia so my script is following.

const messages = ref([]);

onMounted(() => {

    Echo.private(`message-channel.${user.id}`)

        .listen('MessageEvent', (e) => {

            console.log(e.message); // e.message wil contains your message

            messages.value.push(e.message);

        });

});

Step 6: Testing Broadcasting Functionality in Laravel

After setting up broadcasting functionality in Laravel, one way to test it is by creating a test event and broadcasting it.

Creates two routes one for listing the message and another for triggering the broadcast event

Route::get('/message', function () {

    return Inertia::render('Message');//for listing the broadcast message

});

Route::get('/message/{user}', function (User $user) {

    event(new MessageEvent($user, 'Hello world')); // this will trigger the broadcast event.

});

The complete Message.vue file will looks like similar

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20setup%3E%0A%0Aimport%20AuthenticatedLayout%20from%20'%40%2FLayouts%2FAuthenticatedLayout.vue'%3B%0A%0Aimport%20%7B%20Head%20%7D%20from%20'%40inertiajs%2Fvue3'%3B%0A%0Aimport%20%7B%20usePage%20%7D%20from%20'%40inertiajs%2Fvue3'%3B%0A%0Aimport%20%7B%20computed%2C%20onMounted%2C%20ref%2C%20watch%20%7D%20from%20'vue'%3B%0A%0Aconst%20user%20%3D%20usePage().props.auth.user%3B%0A%0Aconst%20messages%20%3D%20ref(%5B%5D)%3B%0A%0AonMounted(()%20%3D%3E%20%7B%0A%0A%20%20%20%20Echo.private(%60message-channel.%24%7Buser.id%7D%60)%0A%0A%20%20%20%20%20%20%20%20.listen('MessageEvent'%2C%20(e)%20%3D%3E%20%7B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20messages.value.push(e.message)%3B%0A%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%0A%7D)%3B%0A%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

<template>

    <Head title="Dashboard" />

    <AuthenticatedLayout>

        <template #header>

            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Dashboard</h2>

        </template>

        <div class="py-12">

            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">

                    <div class="p-6 text-gray-900">

                        {{ user }}

                        <div v-for="(message, index) in messages" :key="index">{{ message }}</div>

                    </div>

                </div>

            </div>

        </div>

    </AuthenticatedLayout>

</template>

Conclusion

In conclusion, setting up broadcasting with Pusher in Laravel is a straightforward process that can greatly enhance the functionality and interactivity of your application. By following the step-by-step guide, you can easily install Pusher in Laravel, configure it, and set up broadcasting with events and listeners. This enables real-time communication between the server and the clients connected to your application. Additionally, creating channels in Pusher allows you to broadcast messages to specific clients, enabling efficient and interactive communication. By configuring Pusher in the client side, you can listen for events and handle them in real-time, further enhancing the functionality of your Laravel application. Finally, testing the broadcasting functionality is essential to ensure that messages are being broadcasted and received as expected. With Pusher and Laravel, you can create robust and interactive web applications that provide a seamless real-time experience for your users.