php - Laravel Echo is not listening

Question

I set up an event and new channel :

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

 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

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 :

 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: AppEventsTaskCreated 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

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:

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

and in vue component listen for event like this:

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.