php - プッシャーで動作しないLaravelブロードキャスト

Question

Web アプリケーションでプッシャーを使用しています。私のバックエンドは Laravel で構築されており、フロントエンドは Angular 10 で構築されています。すべてが私のローカル マシンで完璧に動作します。しかし、サーバーでは機能していません。Laravel イベントがブロードキャストされません。

これは私の放送イベントです

class DrawOptionsChanged implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $options;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($options)
    {
        $this->options = $options;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('draw_options');
    }
}

これを次のコードで呼び出します。

event(new DrawOptionsChanged($data));

すべてが私のローカル マシンで完全に動作します。しかし、サーバーでは、クライアントとlaravel-webSocketsの両方のURLが接続されていますが、イベントはそれらのいずれでも受信されません。

Broadcasting.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'),
                'useTLS' => false,
                'encrypted' => false,
//                'host' => '162.214.125.121',
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http'
            ],
        ],

イベントが websocket url によってブロードキャストされ、クライアントもそれを受信して​​いることに気付きました...しかし、コードからはブロードキャストされていません...すべてがローカルマシンで完全に機能します...

http://api.etakweet.com/laravel-websockets

クライアント接続コード

this.pusher = new Pusher(environment.pusher.key, {
      cluster: environment.pusher.cluster,
      wsHost: '162.214.125.121',
      // wsHost: '127.0.0.1',
      wsPort: 6001,
      encrypted: false,
      forceTLS: false,
    });
    this.channel = this.pusher.subscribe('draw_options');
    Pusher.log = (msg) => {
      console.log(msg);
    };

クライアント バインディング コード

this.pusherService.channel.bind('pusher:subscription_succeeded', function(members) {
          console.log('successfully subscribed!');
        });
        this.pusherService.channel.bind('App\\Events\\DrawOptionsChanged', res => {
          const data = res.options
          this.major = data.major
          this.degree = data.degree
          this.gender = data.gender
          if (data.generate == 1) {
            this.getResult()
          }
        });

放送コード:

public function optionChanged(Request $request)
    {
        $major = $request->input('major');
        $degree = $request->input('degree');
        $gender = $request->input('gender');
        $draw = $request->input('draw');
        $generate = $request->input('generate');
        $data = [
            'major' => $major,
            'draw' => $draw,
            'gender' => $gender,
            'degree' => $degree,
            'generate' => $generate,
        ];

        $drawData = Draw::where('id', $draw)->first();
        $drawData->current_gender = $gender;
        $drawData->current_qualification_type = $degree;
        $drawData->current_major = $major;
        $drawData->save();

        try {
            event(new DrawOptionsChanged($data));
        } catch (\Exception $exception) {
            $exception->getMessage();
        }
        return response()->json([
            'message' => 'success'
        ]);
    }