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.

Does this answer your question? [Laravel echo is no listening](https://stackoverflow.com/questions/43927792/laravel-echo-is-no-listening) — Kamlesh Paul, Sep 02 '20 at 12:15
@KamleshPaul thanks for the fast reply. They are all using the normal `blade.php` files, I am not using this. I'm using the following: https://github.com/cretueusebiu/laravel-vue-spa All my pages are vue components. — Cas Bekhuis, Sep 02 '20 at 12:38

score 0 · Accepted Answer · answered Sep 02 '20 at 15:17

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

Vue Laravel Echo not listening to channel

1 Answers1