Vue Laravel Echo没有收听频道

问题描述

我正在使用laravel-echo来收听我的laravel WebSocket频道。

我将此添加到了app.js：

import Echo from 'laravel-echo'

/*..........*/

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

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

我有一个名为WebsocketMeasurements的事件：

<?PHP

namespace App\Events;

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;
Use App\Measurement;

class WebsocketMeasurements implements Shouldbroadcast
{
    use dispatchable,InteractsWithSockets,SerializesModels;

    public $measurement;

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

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

然后将其添加到我的dashboard.vue文件中：

mounted () {
    window.Echo.channel('measurement.created').listen('WebsocketMeasurements',(e) => {
      console.log(e)
    })
  },

当我尝试在/ laravel-websockets触发测试事件时，什么也没发生。我填写以下数据： 频道：measurement.created 事件：WebsocketMeasurements`` Data: {“ data”：null}`

我希望发生的事情是在控制台中收到{"data": null}，但是那里没有任何记录。

通风口确实以api消息的形式显示在laravel-websockets的事件列表中，并具有以下详细信息： Channel: measurement.created,Event: WebsocketMeasurements

我还尝试将Channel设为PrivateChannel，然后在仪表板提示中将window.Echo.channel更改为window.Echo.private，这导致/ broadcaster / auth链接出现403错误。

在开始之前，我在终端中执行了以下命令： PHP artisan serve npm run hot PHP artisan queue:work PHP artisan websockets:serve PHP artisan queue:listen

我还尝试运行npm run watch而不是高温，这没有帮助。

解决方法

我通过替换来修复了

window.Echo.channel('measurement.created').listen('.WebsocketMeasurements',(e) => {
      console.log(e)
      this.websockets.push(e)
    })

使用

Echo.channel('measurement.created').listen('.WebsocketMeasurements',(e) => {
      console.log(e)
      this.websockets.push(e)
    })