Real-Time Using Pusher & Laravel 10.x

5 min readDec 15, 2023

What’s Real-Time Communication (RTC) ?

In brief, RTC can refer to ‘‘ Online Communication ’’ Which mean that data is sent instantly from sender to destination without storing

No delay -or may be in millisecond- between the moment one person sends a message and the moment the other person(s) receive the message.

Example :- Live Matches, Real-Time Chatting & Notifications and Streaming , etc..

Real Life Example: -

To Say “ Look! it’s A Real-Time ” We Should Have An Event Is Happing NOOOOOOOOW may be like Clasico Real Madrid vs Barcelona it’s Happing Now ‘ That’s an event ’ and also need receiver without dive in details. in our case is your TV.

So We need an event to occur, Broadcaster to broadcast -transmit- our event in the same moment also need to receiver to receive the content in the same moment that the broadcaster creates it. between both there is an channel which event will throw within.

Let’s Talk Some Technical ….

What’s Pusher ?

Pusher is Commercial platform that provides real-time web functionalities for developers. It simplifies the process of adding real-time features to web and mobile applications using a publish-subscribe model, allowing servers to push data to clients in real time. We Can Say It is Our Broadcaster in our case.

There Are Many Broadcaster like WebSocket -open source- , Ably etc.. but here will use pusher.

Now We Know Who’s The Broadcaster. hmm Where’s The Receiver!!

We Can you Laravel echo to work as a receiver on our web -client-. but man You are so lucky!! cause pusher provide also a corresponding receiver no need to use any external receiver. but it doesn’t mean we can not user Laravel echo as a receiver.

Basic Configuration

You Should Uncomment BroadcastServiceProvider::class which contains the code necessary to register the broadcast authorization routes and callbacks. in `config/app.php`

All of your application’s event broadcasting configuration is stored in the config/broadcasting

Let’s Start …

pre. You Need To Create Your Pusher Account. Then Create Your Channel Application With Any Name You Need.

After That Create new Laravel Project or if You Have Any Project With Dashboard For Admin You Can Use.

Config …

In Pusher Website Copy Your Config From App Keys Option

After That You Should Install Pusher Channels PHP SDK:

composer require pusher/pusher-php-server

Then Go To .env File Change Old Config:

BROADCAST_DRIVER=pusher


PUSHER_APP_ID=your-pusher-app-id-from-website
PUSHER_APP_KEY=your-pusher-key-from-website
PUSHER_APP_SECRET=your-pusher-secret-from-website
PUSHER_APP_CLUSTER=mt1

You Totally Done From Config.

Now We Need To Create The Event Which Well be broadcast but first Let me show you what we want to do.

We need When The User Register We Need At The Same Time Notify The Admin Look!! There Is A New User. Which Called Real-Time Notification.

So First As a Server : -

Let’s Create An Event Called NewUserRegisterEvent.

php artisan make:event NewUserRegisterEvent

After That To Make This Event Able To Be Broadcast Should Implements ShouldBroadcast interface Which within:- Illuminate\Contracts\Broadcasting\ShouldBroadcast;

Second: -

In our Event You Will Find constructor and method called broadcastOn so we need to declare a public property called message and in the constructor we need to accept property kind of User Model as a Type Hinting.

In broadcastOn method you will notice that it’s return an array of private channel name. You Have The Right To Call The Channel Any Name You Want. but replace PrivateChannel with Channel.

There is Difference Between Channel, PrivateChannel, PresenceChannel we will discus the difference between then in another article with examples but in this case let it Channel

Now Let’s Dispatch Our Event. But wait wait wait When and Where We need to dispatch !!!

Good Question:- We need dispatch The Event When New User Register now about Where It’s Make sense Will Be In User Create Method.

So in User Create Method We Need To Write: -

Don’t Forget To Pass The User Registered As A Parameter.

Finally As Server We Done. Let’s Do The Easiest Part

As A Client: -

Copy This And Put It Anywhere you Want To Treat With Data Broadcasted: -

  <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>

// Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('your-pusher-app-key', {
      cluster: 'mt1'
    });

    var channel = pusher.subscribe('your-channel-name');
    channel.bind('Your\\Event\\Path', function(data) {
       // Do What You Want With Data
       // I Will Be Enough With Print It On Console
    });

if We Feel That You Need An Example That’s Mine:

I Will This Code Within script Tag In Admin Dashboard Blade Because I wanna The Code There.

Hooolaaa We Finish From Client Let’s Try Our Code

if i refresh the page i already put my code in. you will notice that the console being like that:

that’s mean the we logged the all steps that push did for initiate the connection because the option of : Pusher.logToConsole = true; but in production make it false

Before i Click Register Look At User Name: