Laravel Echo не получает данные от событий Pusher в приложении React JS

Я хотел бы отслеживать изменения в столбце «статус» в моей базе данных в режиме реального времени в моем приложении реагирования, поэтому я создал задание Laravel для обновления столбца. Поэтому я создал событие, которое будет транслироваться из серверной части во внешний, используя PUSHER-js ^8.4.0-rc2 и Laravel-echo ^1.16.1. Ларавел версия 9.2 Реагировать ^17.0.2

Я хотел бы прослушивать и получать обновления столбца «статус» из внутренней части во внешней части. Любые идеи?

Проблема: я почему-то не вижу во фронтенд-части данных, отправленных по каналу "job-status".

вот мой код:

мой файл .env:

`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}"`

мой файл событий:

`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';
    }
}
` 

Моя работа в Laravel:

` 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'));
        }
    }`

мой файл laravel.log:

`[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
}  `

мой файл ресурса/js/bootstrap.js:

`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
});
`

мой файл React-js:

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

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

Я не вижу журнал после прослушивания события:

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

даже при этом вижу, что состояние толкателя подключено и имя канала установлено правильно и событие есть.

это результат console.info 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)

это console.info пушера:

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"]