Unable to broadcast Notification in Laravel

Question

I am trying to use Pusher Notificaiton system to use web sockets to update the current page with the message "YOu have a new Notification" and the bell icon indicating the number of unread notifications. I registered the Events and Listeners and have implemented ShouldBroadcase and connected everything. But I am not getting any message. And unless the page reloads, I am not getting the no. of unread notifications as well.

Here are my codes

Event

<?php

namespace App\Events;

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 NewNotificationEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
        protected $data;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($data)
    {
        $data = $this->data;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return ['my-channel'];
    }
    public function broadcastAs()
    {
      return 'my-event';
    }
}

Listener

<?php

namespace App\Listeners;

use App\Events\NewNotificationEvent;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Queue\InteractsWithQueue;
use DB;
use Illuminate\Support\Facades\Auth;

class NewNotificationListener
{
    /**
     * Create the event listener.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Handle the event.
     *
     * @param  NewNotificationEvent  $event
     * @return void
     */
    public function handle(NewNotificationEvent $event)
    {
        $users = Auth::user();
        DB::select('CALL notification_tbl(?)',array($users->id));   
    }
}

Controller

 if(Gate::allows('manage-users')){
      $userid = $request->userid;
      $notf = $request->notf;
      $priority = $request->priority;

       DB::table('notifications')->insert(['user_id'=>$userid,'notf_message'=>$notf,'priority'=>$priority]);
        $data = array(
        'userid'=>$userid,
        'priority'=>$priority,
        'notf_message'=>$notf,
          
       );

       event (new NewNotificationEvent($data));
       // DB::select('CALL notification_tbl(?)',array($userid));
       return response()->json([
           'success'=>true,
           'msg'=>"User Notified",
       ]);

       
     }
         abort(403, "This Page is only available for Admin");
    }
}

Notification sent from Backend (Backend Controller)

 public function sendNotf(Request $request){
     if(Gate::allows('manage-users')){
      $userid = $request->userid;
      $notf = $request->notf;
      $priority = $request->priority;

       DB::table('notifications')->insert(['user_id'=>$userid,'notf_message'=>$notf,'priority'=>$priority]);
       DB::select('CALL notification_tbl(?)',array($userid));
        $data = array(
        'userid'=>$userid,
        'priority'=>$priority,
        'notf_message'=>$notf,
        );

       // event (new NewNotificationEvent($data));
       

       return response()->json([
           'success'=>true,
           'msg'=>"User Notified",
       ]);
    }
         abort(403, "This Page is only available for Admin");
    }

JS Code (Available in the common blade page- the one which includes the Navbar and is included in every other page)

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

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

    var pusher = new Pusher('be850f6784915a1d43b8', {
      cluster: 'ap2'
    });

    var channel = pusher.subscribe('user-channel');
    channel.bind('user-channel', function(data) {
      alert(JSON.stringify(data));
    });
  </script>

Answer 1

First of all, make your notification by php artisan make:notification exNotification

then implement your notification in toBroadcast function

        return (new BroadcastMessage([
               //
        ]))

Finally use

$user->notify(new exNotification());

Also, you can define your channel name in receivesBroadcastNotificationsOn in User Model

    public function receivesBroadcastNotificationsOn()
    {
        return 'user.'.$this->id;
    }

for more detail please visit : Notifications

Answer 2

    composer require pusher/pusher-php-server
    
    PUSHER_APP_ID=322700
    BROADCAST_DRIVER=pusher
    
    // Get the credentials from your pusher dashboard
    PUSHER_APP_ID=XXXXX
    PUSHER_APP_KEY=XXXXXXX
    PUSHER_APP_SECRET=XXXXXXX

//header or footer file 
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="//js.pusher.com/3.1/pusher.min.js"></script>
    
        <script type="text/javascript">
       
          var pusher = new Pusher('API_KEY_HERE', {
            encrypted: true
          });
    
          // Subscribe to the channel we specified in our Laravel Event
          var channel = pusher.subscribe('my-channel');
      
          channel.bind('App\\Events\\NewNotificationEvent', function(data) {
           console.log('New event');
//reload page for append data to any div 
          });
        </script>