php - Laravel Broadcast in not working with Pusher

I am using Pusher in my Web Application. My backend is built with Laravel & Frontend is built with Angular 10. Everything works perfectly in my local machine. But in the server it is not working. Laravel Event is not getting broadcasted.

This is my Broadcasting Event

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

Calling this with the following code:

event(new DrawOptionsChanged($data));

Everything workes perfectly in my local machine. But in the server, both client and laravel-webSockets url is getting connected but events are not received in any of them.

in 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'
            ],
        ],

I have noticed, events are getting broadcasted by the websocket url and client is also receiving that... But from codes they are not getting broadcasted... Everything works perfectly in local machine...

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

Client Connection Codes

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

Client Binding Codes

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

pusher connect

Broadcasting Code:

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

Answer

Solution:

try this laravel echo https://www.npmjs.com/package/laravel-echo

Echo.channel("draw_options")
            .listen("DrawOptionsChanged ",res  => {
                         const data = res.options
                        this.major = data.major
                        this.degree = data.degree
                        this.gender = data.gender
                        if (data.generate == 1) {
                            this.getResult()
                        }
                    }
                );

Source