Laravel livewire不处理来自广播的监听程序

Question

我试着在laravel中收听从广播中发出的事件，但是什么也没有发生；

在我的bootstrap.js上我有：

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'myKey',
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStat: true,
    forceTLS: false,
});

我的活动拉瓦尔

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

    public function __construct()
    {
        //
    }

    public function broadcastAs(){
        return 'task-finish';
    }

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

我的听众

class SendTaskNotif
{
    /**
     * Create the event listener.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Handle the event.
     *
     * @param  TaskFinished  $event
     * @return void
     */
    public function handle(TaskFinished $event)
    {
    }
}

和我的livewire组件

protected $listeners = ['echo:TaskTricolor,TaskFinished' => 'eventlisten'];

    // public function getListeners(){
    //     return [
    //         'echo:TaskTricolor,TaskFinished' => 'eventlisten'
    //     ];
    // }

    public function start(){
        $this->start = true;
        $tricolors = new TricolorController();
        $this->tricolor = $tricolors->start();
    }

    public function stop(){
        $this->start = false;
        $tricolors = new TricolorController();
        $this->tricolor = $tricolors->stop();
    }
    

    public function emet(){
        event(new TaskFinished());
    }

    public function eventlisten(){
        $vars = "test";
        dd($vars);
    }

在我的监听程序中，我设置了dd('test')，当调用emet函数时，将显示dd值；

因此，当我使用livewire侦听器处理程序进行测试时，什么都没有发生，我的dd没有出现，也没有错误；

我尝试从刀片服务器控制台记录Echo，以测试我是否可以处理侦听器，但它显示Echo未定义，但当我console.log窗口时，我看到Echo内部

​

在我的websocket仪表板上，我有：

​

我不知道它是否能帮助解决问题，我使用beyondcode/laravel-websockets包作为驱动程序

Answer 1

当我第一次开始使用Livewire (1.0版)时，我们使用vanilla javascript收听消息，然后称为Livewire。

document.addEventListener("DOMContentLoaded", function () {
    window.Echo.private('TaskTricolor')
        .listen('.task-finish', (response) => { 
            window.Livewire.emit('task-finish', response));
        }
    });

你可以试试这个。它不像你的方法那样是一个干净的解决方案，但我认为更容易调试。

Answer 2

我发现了这个问题；在我的event类中，我应该使用ShouldBroadCastNow而不是ShouldBroadCast

class TaskFinished implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function __construct()
    {
        //
    }

    public function broadcastAs(){
        return 'task-finish';
    }

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

ShouldBroadCast将事件放入队列中，所以它不会在调用事件时激活，但ShouldBroadCastNow会立即监听事件，here链接我找到了解释