编辑：忘记添加bootstrap.js
我试图使用Pusher和Laravel-Echo设置websockets，但我遇到了一个奇怪的bug。我可以看到我的事件在Pusher调试器控制台上被触发，但我没有在我的前端接收事件。下面是我的代码来设置Pusher：

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,
    encrypted: true,
});

字符串

广播.php

'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'),
                'encrypted' => true
            ],
        ],

型

app.php

/*
         * Application Service Providers...
         */
        App\Providers\AppServiceProvider::class,
        App\Providers\AuthServiceProvider::class,
        App\Providers\BroadcastServiceProvider::class,
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,
        Tymon\JWTAuth\Providers\LaravelServiceProvider::class,

型

OptionChange.php（这是我正在监听的事件）

<?php

namespace App\Events;

use App\ItemInstance;
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;

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

    public $instance;

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

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('itemInstance' . $this->instance->id);
    }

    // return this info in Pusher
    public function broadcastWith() {
        return [
            'id' => $this->instance->id,
            'answer' => $this->instance->answer,
            'question_number' => $this->instance->question_number
        ];
    }
}

型
React Code（我正在监听我的事件）

// set up channel listener for live updates
    componentDidMount() {
        const { started, studentId } = this.state

        if (!started) {
            window.Echo.channel('studentStartedTest' + studentId)
                .listen('StartTest', (didStart) => {
                    console.log('startTest')
                    if (didStart) { 
                        this.setState({ started: true })
                    }
                })
        } else {
            // window.Echo.leaveChannel('studentStartedTest' + studentId)
            window.Echo.channel('itemInstance' + this.props.id)
            .listen('OptionChange', (instance) => {
                console.log('change')
                this.setState({ answer: instance.answer })
            })

        }
    }

型
正如你所看到的，每当我的事件触发时，我都会尝试console.log。不幸的是，console.log永远不会运行。
我也试过将implements ShouldBroadcast更改为implements ShouldBroadcastNow，但没有任何改变