Vue Laravel Echo not listening to channel

Question

I am using laravel-echo to listen to my laravel WebSocket channel.

I added this to my 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
})

I have an event called 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');
    }
}

And I added this to my dashboard.vue file:

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

When I try to fire an test event at /laravel-websockets nothing happens. I fill in the following data: Channel: measurement.created Event: WebsocketMeasurements`` Data: {"data": null}`

What I expected to happen is to receive {"data": null} in the console, but there's nothing logged there.

The vent does show up in the events list at laravel-websockets as an api-message with the following details: Channel: measurement.created, Event: WebsocketMeasurements

I also tried making Channel a PrivateChannel and changing window.Echo.channel to window.Echo.private in my dashboard vue, this resulted in a 403 error to the link /broadcaster/auth.

Before I started I did the following commands in the terminal: php artisan serve npm run hot php artisan queue:work php artisan websockets:serve php artisan queue:listen

I also tried running npm run watch instead of hot, this didn't help.

Answer 1

I fixed it by replacing

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

with

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