Laravel Web 套接字推送器 - 不工作但事件触发

如何解决Laravel Web 套接字推送器 - 不工作但事件触发

我正在尝试使用 laravel websocket 在我的应用中执行套接字连接。

执行laravel docs 中的所有步骤但仍然无法正常工作，dashborad 中没有出现连接，只有当我从laravel tinker 触发时才会发生事件（不触发我放入listen 方法的console.log）

附上我拥有的文件以了解有关此案的更多信息。

服务器端：

Websocket.php 文件

 'apps' => [
        [
            'id' => env('PUSHER_APP_ID'),'name' => env('APP_NAME'),'key' => env('PUSHER_APP_KEY'),'secret' => env('PUSHER_APP_SECRET'),'path' => env('PUSHER_APP_PATH'),'capacity' => null,'enable_client_messages' => false,'enable_statistics' => true,],]

事件文件

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

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

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

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

//    public function broadcastAs()
//    {
//        return "customers-updated";
//    }
}

带有 Laravel echo 的客户端：

Service:
    this.echo = new Echo({
      broadcaster: 'pusher',key: environment.pusher.key,cluster: environment.pusher.cluster,// wsPort: 6001,// wsHost: 'http://crm.test/api',// useTLS: false,disableStats: true
    });

组件：

   const channel = this.echoService.echo.channel('customers').listen('CustomerUpdated',(e) => {
      console.log(e);
    });

api-message     Channel: customers,Event: App\Events\CustomerUpdated   22:45:31
subscribed  555985715.292445342 Channel: private-websockets-dashboard-statistics    22:36:49
occupied        Channel: private-websockets-dashboard-statistics    22:36:49

解决方法

我不确定你是否解决了这个问题，但如果你不让我回应

在 Angular 和 Laravel 中，你需要使用 laravel websockets、laravel 护照（如果你愿意）、pusher 和 laravel echo

因为您不会使用推送服务，因为您可以将 pusher_app_id 和 .env 文件中的其余信息设置为虚假信息，就像这样

PUSHER_APP_ID=123456
PUSHER_APP_KEY=123456ASD
PUSHER_APP_SECRET=ASD123456
PUSHER_APP_CLUSTER=mt1

您需要更改的是broadcast.php 文件而不是websockets 文件（不要忘记在config 中的app.php 文件中启用App\Providers\BroadcastServiceProvider::class）

    'connections' => [
    
            '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' => true,'host' => '127.0.0.1',//this is your localhost
                    'port' => 6001,'scheme' => 'http'
                ],],...

然后在您的事件文件中几乎完成，您需要声明一些变量，当它收到某些东西时发出事件，在我的情况下这个事件是“计数”

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

    public $count; //Look that you don't have this

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($count)
    {
        
        $this->count = $count; //Look that you don't have this

    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('channel-count'); //Look that you don't have your channel as private (this isn't bad,is just in case that you want your channel as priv)
    }
}

并且不要忘记在路由的通道文件中声明

Broadcast::channel('channel-count',function ($count) {
    return $count;
});

然后在你的 angular 项目中你需要安装 laravel echo

你可以在环境文件中声明一些数据来重复使用

export const environment = {
  production: false,urlBase: `http://127.0.0.1:8000`,pusher_key: `123456ASD`,pusher_cluster: `mt1`,pusher_host: `127.0.0.1`
};

安装后，需要导入组件文件

import Echo from 'laravel-echo';

并在构造之前声明它

echo: Echo;

在构造函数中，您需要按照 laravel echo 的文档声明

constructor(

    //some services here

  ) {

    this.echo = new Echo({

      broadcaster: 'pusher',key: environment.pusher_key,wsHost: environment.pusher_host,cluster: environment.pusher_cluster,authEndpoint: `${environment.urlBase}/api/broadcasting/auth`,//here in my case I need to prove that the user is logged to give an access to the listen of the socket

      auth: {

        headers: {

          Accept: 'application/json',Authorization: `Bearer ${localStorage.getItem('token')}`

        }

      },wsPort: 6001,forceTLS: false,disableStats: true,enabledTransports: ['ws']

    })

  }

然后在您的 onInit 函数中，您将监听事件声明为套接字

ngOnInit(): void {

    this.echo.private('channel-count')

      .listen('CountEvent',(resp: any) => {
        console.log(resp)

      })

  }

仅此而已，希望能帮到你。 :)