Laravel 未接收到 Nuxt JS 的广播事件答案

【问题标题】：Laravel broadcast events to Nuxt JS not being receivedLaravel 未接收到 Nuxt JS 的广播事件
【发布时间】：2021-05-06 11:53:25
【问题描述】：

我有一个 Laravel 8.x 项目设置为带有 JWT 身份验证的 API。我正在使用 Laravel Websockets 包，我还安装了 Laravel Echo package for Nuxt JS 以及 Pusher JS 和 Socket.io

我已经启动了我的网络套接字服务器，它在 127.0.0.1 上的端口 6001 上运行，但是当我加载我的 Nuxt JS 前端时，我没有看到任何事件发生？

我的活动名为AgentStats，看起来像...

<?php

namespace App\Events;

use App\Models\ProfilerAgent;

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

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

    /**
     * Profiler Agent Details
     *
     * @var \App\Models\ProfilerAgent
     */
    public $agent;

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

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

我的事件是通过需要用户登录的控制器触发的，然后通过以下方式触发：

// $agent is my data
broadcast(new AgentStats($agent));

我已更新我的channels.php 文件以包含新的广播频道...

Broadcast::channel('agents', function ($agent) {
    return $agent;
});

对于我的前端，我的 Nuxt JS 客户端，我是一个登录用户，并且正在我的 agents 频道上收听我的 AgentStats 事件：

<script>
export default {
  layout: 'account',
  mounted() {
    // nothing is logged
    this.$echo.channel('agents')
      .listen('AgentStats', (e) => {
          console.log(e)
      })
  }
}
</script>

我的配置是：

buildModules: [
  // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
  '@nuxtjs/tailwindcss',
  '@nuxtjs/moment',
  ['@nuxtjs/laravel-echo',{
      broadcaster: 'pusher',
      key: 'websocketkey', // this is what's in my env
      encrypted: false,
      wsHost: '127.0.0.1', // default url
      wsPort: 6001,
      disableStats: true,
      authEndpoint: '127.0.0.1/broadcasting/auth'
  }]
]

真的不知道我错过了什么，我已经调试了几个小时，无法理解为什么我的 Nuxt JS 项目在我提交事件时无法显示任何数据。

【问题讨论】：

标签： javascript php laravel nuxtjs

【解决方案1】：

在您的 AgentStats 事件文件中使用

    public function broadcastOn(){
        return new Channel('agents');
    }

而不是

    public function broadcastOn()
    {
        return new PrivateChannel('agents');
    }

【讨论】：

【解决方案2】：

使用ShouldBroadcastNow 而不是ShouldBroadcast

之前

use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class AgentStats implements ShouldBroadcast{...}

之后

use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;

class AgentStats implements ShouldBroadcastNow{...}

这是一个使用 Laravel 在 SSR Nuxtjs 中使用 websockets 的完整示例 https://github.com/DengSihan/bootstrap

【讨论】：