Laravel Echo not receiving data from Pusher events in React JS APP

I would like to track the changes in the column "status" in my database in real-time in my react-js app, so I created a Laravel job to update the column. So I created an event that will be broadcasted from the backend part to the frontend part using PUSHER-js ^8.4.0-rc2 and Laravel-echo ^1.16.1. Laravel version 9.2 React ^17.0.2

I would like to listen and get the "status" column updates from the backend part in the frontend part. any ideas?

Problem: for some reason, I can't see the data sent by the channel "job-status" in the frontend part.

here is my code :

my .env file :

`PUSHER_APP_ID=my_app_id
PUSHER_APP_KEY=my_app_key
PUSHER_APP_SECRET=my_app_secret
PUSHER_APP_CLUSTER=mt1

PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME="https"
BROADCAST_CONNECTION=pusher


MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"`

my event file :

`class JobStatusUpdated implements ShouldBroadcast
{
    use Dispatchable;
    use InteractsWithSockets;
    use SerializesModels;

    public $status;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($status)
    {
        $this->status = $status;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        Log::channel('job-status')->info('Channel ');
        return new Channel('job-status');

    }

    public function broadcastWith()
    {
        return ['status' => $this->status];
    }

    public function broadcastAs()
    {
        return 'JobStatusUpdated';
    }
}
` 

My Laravel job :

` public function handle(
service $service)
    {

        try {
            $service->updateStatus($this->annotationId, 'processing');
            event(new JobStatusUpdated('processing'));

            $service->updateContent($this->annotationId);

            $service->updateStatus($this->annotationId, 'completed');
            event(new JobStatusUpdated('completed'));
        } catch (\Exception $e) {

            $this->failed($e);
            event(new JobStatusUpdated('failed'));
        }
    }`

my laravel.log file :

`[2024-04-19 09:30:31] local.INFO: Broadcasting [JobStatusUpdated] on channels [job-status] with payload:
{
    "status": "processing",
    "socket": null
}  
[2024-04-19 09:30:49] local.INFO: Broadcasting [JobStatusUpdated] on channels [job-status] with payload:
{
    "status": "completed",
    "socket": null
}  `

my resource/js/bootstrap.js file :

`import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});
`

my React-js file :

`const getSpeaker = (e, id) => {
        console.log("window.Echo", window.Echo)

        Pusher.logToConsole = true;
       Echo.channel(`job-status`)
            .listen('.JobStatusUpdated', (event) => {
                console.log('Received JobStatusUpdated event', event);
                console.log("e", event.payload)
            });
        console.log("window.Echo", window.Echo);
        Pusher.logToConsole = true;`

I can't see the log after listening to the event:

  console.log('Received JobStatusUpdated event', event); 

even that I see that the state of the pusher is connected and the channel name is correctly set and the event is there.

this is the console.log result of the window.Echo :

connector: a
channels: {job-status: a}
eventFormatter: 
t {namespace: 'App.Events'}
name: "job-status"
pusher: ke
channels: Ft
channels: 
job-status: zt
callbacks: it
_callbacks: _JobStatusUpdated: Array(1)

this is the console.log of the pusher :

Pusher :  : ["Event sent",{"event":"pusher:subscribe","data":{"auth":"","channel":"job-status"}}]
Pusher :  : ["Event recd",{"event":"pusher_internal:subscription_succeeded","channel":"job-status","data":{}}]
Pusher :  : ["No callbacks on job-status for pusher:subscription_succeeded"]

pusher.subscribe('job-status'); channel.bind('your-event-name', function(data) { // Your Code logic });