Pusher is not receiving events from the server

Hi, my page connects to pusher fine. it subscribes and everything. Im following the instructions here https://pusher.com/tutorials/web-notifications-laravel-pusher-channels. and applying it to my project.

somehow, pusher is not receiving my events. the debug console is not showing the "API MESSAGE" from my page.

here's my code.

my script in the page

<!-- pusher js start -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="    crossorigin="anonymous"></script>
<script src="//js.pusher.com/3.1/pusher.min.js"></script>

<script type="text/javascript">
    var notifCount = {{App\Models\Client::find(session('clientDetails')->client_id)->unreadNotifications->count()}};
    var title = document.title;

    //shows notification count on the title and the badge if there is a notification
    if (notifCount > 0) {
        $('#notifcount').text(notifCount);
        var newTitle = '(' + notifCount + ') ' + title;
        document.title = newTitle;
    }

    // Enable pusher logging - don't include this in production
       Pusher.logToConsole = true;
    // Initiate the Pusher JS library
    var pusher = new Pusher('my app key', {
        encrypted: true
    });

    // Subscribe to the channel we specified in our Laravel Event
    var channel = pusher.subscribe('peoples-applied');

    //Request Permission for notification in browser
    Notification.requestPermission();

    // Bind a function to an Event (the full Laravel class)
    channel.bind('App\\Events\\SomeoneHasApplied', function(data) {

        var firstname = data.jobseeker.firstname;
        var lastname  = data.jobseeker.lastname;
        var newPerson = '<li><a href="/notification/markallread">' + firstname + ' ' + lastname + ' has applied</a></li>';


        //get notification dropdown class
        //append new li
        $('.dropdown-notifications').append(newPerson);
        //+1 to notification count
        notifCount += 1;
        $('#notifcount').text(notifCount);

        //updates the notification count on the title
        var newTitle = '(' + notifCount + ') ' + title;
        document.title = newTitle;

        //shows notification card
        var notification = new Notification("A new person has applied. Check it out");
    });
</script>
<!-- pusher js end -->

my event

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Notifications\Notification;
use App\Models\Microsite;

class SomeoneHasApplied implements ShouldBroadcast     
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public $jobseeker;
    public $message;

    public function __construct(Microsite $jobseeker)
    {
        //  
        $this->jobseeker = $jobseeker;
        
    }

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

    public function toArray($notifiable)
    {
         
        return $this->jobseeker;
          
    }
}

my env

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:oVLwimc1bsgB7H2deJxtPuTIvfuV9gNdCm7CBZLvOzY=
APP_DEBUG=true
APP_LOG_LEVEL=debug
APP_URL=http://localhost

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=bchv2
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=sync

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_DRIVER=
MAIL_HOST=
MAIL_PORT=
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_ENCRYPTION=

PUSHER_APP_ID=correct id
PUSHER_APP_KEY=correct key
PUSHER_APP_SECRET=correct secret
PUSHER_APP_CLUSTER=correct cluster

the App\Providers\BroadcastServiceProvider::class is uncommented from the config/app.php

my broadcasting.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Broadcaster
    |--------------------------------------------------------------------------
    |
    | This option controls the default broadcaster that will be used by the
    | framework when an event needs to be broadcast. You may set this to
    | any of the connections defined in the "connections" array below.
    |
    | Supported: "pusher", "redis", "log", "null"
    |
    */

    'default' => env('BROADCAST_DRIVER', 'null'),

    /*
    |--------------------------------------------------------------------------
    | Broadcast Connections
    |--------------------------------------------------------------------------
    |
    | Here you may define all of the broadcast connections that will be used
    | to broadcast events to other systems or over websockets. Samples of
    | each available type of connection are provided inside this array.
    |
    */

    'connections' => [

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                //
                'cluster' => env('PUSHER_APP_CLUSTER'),
                
            ],
        ],

        'redis' => [
            'driver' => 'redis',
            'connection' => 'default',
        ],

        'log' => [
            'driver' => 'log',
        ],

        'null' => [
            'driver' => 'null',
        ],

    ],

];