Laravel Echo is not listening

问题

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

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']

回答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.

回答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

回答3:

As Kabelbaan said, remove the dot but go to the debug console and just refresh your app to start with. You should see connection and subscription for your tasks channel. If you don't, you can start debugging the connection rather than pushing dispatching the event. Also, I gather the copy & paste is just incomplete but your window.Echo statement is incomplete.

回答4:

net::ERR_CERT_AUTHORITY_INVALID.

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

You have possibly a problem with your ssl certification. You are using wss which connects on https only. You should check out your ssl cert or use ws instead.

Plus tip:

I would use socket.io + redis combo instead of pusher.

Server side: https://github.com/tlaverdure/laravel-echo-server
Client side: https://laravel.com/docs/7.x/broadcasting have socket.io section

回答5:

Maybe you can try:

In your TaskCreated event:

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

and in your Vue:

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

来源：https://stackoverflow.com/questions/61646626/laravel-echo-is-not-listening

标签

php

laravel

Vue.js

laravel-7

laravel-websockets