Create Real-Time Component using Laravel Echo, Pusher & Vue.js (Part-2)

In the previous part, we set up our pusher application and done real-time like & dislike component. If you want to view our first part Click Here.

💎 Part 2— Real-Time Reply Component

Before we jump to create those component we have to send this broadcast to a private channel and make the channel usable for authenticate user by given JWT token in the pusher header. Other wish it will give us this error:

Pusher Authenticate error

Solution: For this problem solution, go to the resources\js\bootstrap.js file and update the file to the following below:

📝 Edit: Bootstrap File

//We stored authenticate user data in local storage
const JWTtoken = `Bearer ${localStorage.getItem('token')}`

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

🚦 Fire The Event

In our project we have an database notification system, we will work on that file. First open app\Notifications\NewReply.php and update to the following below:

📝 Edit: Notification File

//Must include
namespace App\Notifications;
+
+
+
use Illuminate\Notifications\Messages\BroadcastMessage;

public function via($notifiable)
{
      return ['database','broadcast'];
}
public function toArray($notifiable)
{
     return [
        'replyBy' => $this->reply->user->name,
        'question' => $this->reply->question->title,
        'path' => $this->reply->question->path,
    ];
}

public function toBroadcast($notifiable)
{
     return new BroadcastMessage([
         'replyBy' => $this->reply->user->name,
         'question' => $this->reply->question->title,
         'path' => $this->reply->question->path,
         //this will use a resource file.
          'reply' => new ReplyResource($this->reply), 
     ]);
}

Full code is here.

🚦 Listening That Event

After doing that we will go to our front view resource. In our resources\js\components\Reply\Replies.vue file we need to listen the fire event.

📝 Edit: Replies.vue File

<script>
data(){
     return{
        content: this.replies
     }
},
methods: {
     listen(){
       
       //User is an global helper class and id is it's method.
        Echo.private('App.User.' + User.id())
          .notification((notification) => {
               this.content.unshift(notification.reply)
           });
     }
}
</script>

Full code is here.

Note: We did not need to create any broadcast channel for this event because we already have one in routes\channels.php

Broadcast::channel('App.User.{id}', function ($user, $id) {
     return (int) $user->id === (int) $id;
});

💎 Part 3— Real-Time Notification Component

As soon as we completely create our real-time reply component we can easily create real-time notification system using same broadcast event and listener.

For that we have to go resources\js\components\AppNotification.vue File and update the file to the following below:

📝 Edit: Front-end Notification File

<script>
export default {
     data: () => ({
         read: {},
         unread: {},
         unreadCount: 0,
     }),
      created(){
        
         //User is an global helper class and id is it's method.
          Echo.private('App.User.' + User.id())
                .notification((notification) => {
                     this.unread.unshift(notification)
                     this.unreadCount ++
                });
      },
}
</script>

Full code is here.

🙌 Final Wrap Up

Thank for reading out...

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