Vue Laravel Echo 没有收听频道

Question

我正在使用 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}，但那里没有任何记录。

通风口确实在 laravel-websockets 的事件列表中显示为 api-消息，其中包含以下详细信息： Channel: measurement.created, Event: WebsocketMeasurements

我还尝试在我的仪表板 vue 中将 Channel 设为 PrivateChannel 并将 window.Echo.channel 更改为 window.Echo.private，这导致 [=57= 出现 403 错误] /broadcaster/auth.

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

我也试过运行 npm run watch 而不是热的，这没有帮助。

Answer 1

我通过替换

修复了它

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)
    })

Vue Laravel Echo 没有收听频道

Vue Laravel Echo not listening to channel

php

laravel

vue.js

laravel-echo

laravel-websockets