Laravel Broadcast无法与Pusher一起使用

问题描述

我在Web应用程序中使用Pusher。我的后端是用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));

一切都可以在我的本地计算机上正常运行。但是在服务器中，client和laravel-webSockets url都已连接，但其中任何一个都未接收到事件。

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

解决方法

尝试此Laravel回声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()
                        }
                    }
                );