Laravel Echo 未从 React JS APP 中的 Pusher 事件接收数据

Question

我想在我的react-js应用程序中实时跟踪数据库中“状态”列的更改，因此我创建了一个laravel作业来更新该列。因此，我创建了一个事件，该事件将使用 PUSHER-js ^8.4.0-rc2 和 Laravel-echo ^1.16.1 从后端部分广播到前端部分。 Laravel 版本 9.2 反应^17.0.2

我想听并从前端部分的后端部分获取“状态”列更新。有什么想法吗？

问题：由于某种原因，我在前端部分看不到通道“作业状态”发送的数据。

这是我的代码：

我的.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.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;`

听事件后看不到日志：

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

即使我看到推送器的状态已连接，通道名称已正确设置，并且事件也存在。

这是

window.Echo

的 console.log 结果：

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.log :

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

Answer 1

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