Create Real-Time Component using Laravel Echo, Pusher & Vue.js

Real-Time Notification, Reply, Like & Dislike System

We will work on an existing Laravel project.

💎 Part 1 — Real-Time Like and Dislike Component

Step: 1 — Setting up your Pusher application

Create a Pusher account, if you have not already, and then set up your application as seen in the screenshot below.

Step: 2— Configure Laravel application

📦 Package Install: Laravel Pusher

we will need to install the Pusher PHP SDK, you can do this using Composer by running the command below:

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

When Composer is done, open the .env file that is in the root directory of your Laravel installation. Update the values to correspond with your your Pusher credentials like:

BROADCAST_DRIVER=pusher 
// Get the credentials from your pusher dashboard
PUSHER_APP_ID=XXXXX
PUSHER_APP_KEY=XXXXXXX
PUSHER_APP_SECRET=XXXXXXX
PUSHER_APP_CLUSTER=XXX

Open config/app.php and uncomment this provider in the providers array

App\Providers\BroadcastServiceProvider::class

📦 Package Install: Laravel Echo

Again we will need to install the Laravel Echo, you can do this using Composer by running the command below:

npm install --save laravel-echo pusher-js

When Composer is done, open the resources/js/bootstrap.js file and uncomment this code bellow of the file:

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

Step: 3— Creating our application (Back-end)

Now that we are done with configuration, let us create our application. First we would create an Event class that would broadcast to Pusher from our Laravel application. Events can be fired from anywhere in the application. you can do this by two way one is using Composer by running the command below:

php artisan make:event LikeEvent

Another is by editing app/providers/EventServiceProvider.php

📝 Edit: Event Service Provider File

protected $listen = [
   Registered::class => [
      SendEmailVerificationNotification::class,
   ],
   'App\Events\LikeEvent' => [
      'App\Listerners\LikeEventListener',
    ],
];

Then run this command:

php artisan event:generate

This will create a new LikeEvent.php file in the app/Events directory and LikeEventListener.php file in the app/Listerners , Now open LikeEvent.php file and update to the following below:

📝 Edit: Like Event File

class LikeEvent implements ShouldBroadcast {
   use Dispatchable, InteractsWithSockets, SerializesModels;
   public $id;
   public $type;
   public function __construct($id, $type)
   {
       $this->id = $id;
       $this->type = $type;
   }
   public function broadcastOn()
   {
       return new Channel('likeChannel');
   }
}

Above, we have implemented the ShouldBroadcast interface and this tells Laravel that this event should be broadcasted using whatever driver we have set in the configuration file.

Then we need to create the likeChannel Channel. For that, open routes/channel.php and add this code:

📝 Edit: Channel file

Broadcast::channel('likeChannel', function () {
     return true; //Always return true or false
});

🚦 Fire The Event

After creating even file we need to file that event by using broadcastfunction.

In out project we have LikeController.php file where like and dislike functions are stored. We will fire the event in this file.

📝 Edit: Like Controller file

public function likeIt(Reply $reply)
{
    $reply->like()->create([
       'user_id' => auth()->id(),
     ]);
     broadcast(new LikeEvent($reply->id, 1))->toOthers();
}
public function unLikeIt(Reply $reply)
{
    $reply->like()->where('user_id', auth()->id())->first()->delete();
    broadcast(new likeEvent($reply->id, 0))->toOthers();
}

👀 Checking: Check Our application send data to pusher debug

Step: 4— Work on our Front end

🚦 Listening That Event

We have to listen our event broadcasts. First, use the channel method to retrieve an instance of a channel, then call the listen method to listen for a specified event

In our existing application we have resources\js\components\Likes\like.vue File. We will work on this file.

📝 Edit: Like View file

mounted(){
      Echo.channel('likeChannel') //Should be Channel Name
        .listen('LikeEvent', (e) => {
           if(this.content.id == e.id){
                 e.type== 1? this.count ++ : this.count --
           }
        });
},

👀 Checking: Testing our set up

🙌 Final Wrap Up

Thank for reading out. In the next part we will work on real-time reply and notification component. Click Here for the next part.

The code is available on GitHub, you can star, fork and play around with it.