时间戳

首页 > 解决方案 > Laravel 未接收到 Nuxt JS 的广播事件

javascript - Laravel 未接收到 Nuxt JS 的广播事件

问题描述

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

我已经启动了我的 web sockets 服务器，它在 port 6001on 上运行127.0.0.1，但是当我加载我的 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 项目在我提交事件时无法显示任何数据。

标签： javascriptphplaravelnuxtjs

解决方案

在您的 AgentStats 事件文件中使用

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

代替

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

推荐阅读