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

问题描述

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

我已经启动了我的Web套接字服务器，它正在6001端口127.0.0.1上运行，但是当我加载Nuxt JS前端时，看不到任何事件通过？

我的事件名为AgentStats，如下所示.

<?php

namespace AppEvents;

use AppModelsProfilerAgent;

use IlluminateBroadcastingChannel;
use IlluminateBroadcastingInteractsWithSockets;
use IlluminateBroadcastingPresenceChannel;
use IlluminateBroadcastingPrivateChannel;
use IlluminateContractsBroadcastingShouldBroadcast;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;

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

    /**
     * Profiler Agent Details
     *
     * @var AppModelsProfilerAgent
     */
    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 IlluminateBroadcastingChannel|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项目在提交事件时没有显示任何数据。

推荐答案

使用ShouldBroadcastNow而不是ShouldBroadcast

之前

use IlluminateContractsBroadcastingShouldBroadcast;

class AgentStats implements ShouldBroadcast{...}

之后

use IlluminateContractsBroadcastingShouldBroadcastNow;

class AgentStats implements ShouldBroadcastNow{...}

以下是在带有Laravel的SSR Nuxtjs中使用WebSockets的完整示例https://github.com/DengSihan/bootstrap

这篇关于未接收到到Nuxt JS的Laravel广播事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！