Laravel Echo is not listening

Question

I set up an event and new channel :

Click to copy

class TaskCreated implements shouldBroadcast
 {
use Dispatchable, InteractsWithSockets, SerializesModels;
public $task;

public function __construct(Task $task)
{
    $this->task = $task;
}

}

and installed Echo and set it up

Click to copy

 import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'pusher-key',
    cluster: 'ap2',
    encrypted: true
});

then I call the TaskCreated event when a task is posted

Click to copy

event(new TaskCreated($task));

However, the issue is Echo doesn't listen to pusher logs or ANYTHING. even though in laravel-websockets the event was created as an api-message.

here is vue js Echo implementation :

Click to copy

 mounted () {
        axios.get('/tasks').then(response => (this.tasks = response.data));

       Echo.channel('taskCreated').listen('TaskCreated', (e) => {
            console.log(e);
            this.tasks.push(task.body)
        });

in the dashboard :

api-message Channel: taskCreated, Event: App\Events\TaskCreated 19:01:55

UPDATE

Now when I tried to connect with WS the connection status is pending for 10 seconds then finished with an error WebSocket is closed before the connection is established. AND Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID.

Request URL: wss://127.0.0.1/app/local?protocol=7&client=js&version=6.0.2&flash=false

Click to copy

import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
 key: process.env.MIX_PUSHER_APP_KEY,
 wsHost: window.location.hostname,
 wssPort: 6001,
 disableStats: true,
 enabledTransports: ['ws', 'wss']

Answer 1

i dont see broadcastOn method in TaskCreated event if you have it in your code just use broadcastAs method too like this:

Click to copy

public function broadcastAs()
{
    return 'task.created';
}

and in vue component listen for event like this:

Click to copy

Echo.channel('taskCreated').listen('.task.created', (e) => {
            this.tasks.push(task.body)
        });

more info: https://laravel.com/docs/broadcasting but about laravel-websockets i use it recently and have similar problem and check their github repo turned out they have some open issues for this error that they didnt fix. i love spatie packages but for this one tlaverdure/laravel-echo-server is my first choise and easier to work with.

Answer 2

for anyone out there, after many attempts here is what I found ... you MUST have pusher credentials set in your env. and broadcast.js. I tried a lot with Laravel 7 to set it without the credentials ( no luck ) otherwise many issues from Google Chrome and network requests will blow up. this is for me and hopefully, this will work for you

Answer 3

Maybe you can try:

In your TaskCreated event:

Click to copy

public function broadcastOn()
{
   return new Channel('task.created');     
}

and in your Vue:

Click to copy

Echo.channel('task.created').listen('TaskCreated', (e) => {
            this.tasks.push(task.body)
        });

Answer 4

For Laravel 6.2 use socket.io-client@2.4.0