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

Real-Time Notification, Reply, Like & Dislike System

Mosharrf Hossain
Feb 19, 2019 · 4 min read
Image for post
Image for post

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 , if you have not already, and then set up your application as seen in the screenshot below.

Image for post
Image for post

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 dashboardPUSHER_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

Image for post
Image for post

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. for the next part.

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

Mh Mohon

This is My blog

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface.

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox.

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store