laravel Echo does not listen to channel and events

Question

To broadcast an event on a channel I used laravel Echo , redis and socket-io.

this is my event :

    class ChatNewMessage implements ShouldBroadcast
    {
        use InteractsWithSockets, SerializesModels;

        public $targetUsers;
        public $message;

        public function __construct ($message)
        {
            $this->targetUsers = $message->chat->users->pluck('user_id');
            $this->message     = $message;
        }

        public function broadcastOn ()
        {
            $userChannels = [];
            foreach ($this->targetUsers as $id) {
                $userChannels[] = 'user-channel.' . $id;
            }
            return $userChannels;

        }

        public function broadcastAs()
        {
            return 'NewMessage';
        }


    }

For Socket.io server I'm using laravel-echo-server and below is configuration:

{
    "authHost": "http://api.pars-app.dev",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "1924bf1d59b3759d",
            "key": "eaf9e3c843493421f4be488fba11f49d"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": "127.0.0.1",
    "port": "3000",
    "protocol": "http",
    "socketio": {},
    "sslCertPath": "",
    "sslKeyPath": ""
} 

And this is Echo structure in bootstrap.js file :

import Echo from "laravel-echo";
window.echo = new Echo({
    broadcaster: 'socket.io',
    host: 'http://127.0.0.1:3000',
    auth: {
        headers: {
            Authorization: 'bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjUsImlzcyI6Imh0dHA6XC9cL2FwaS5wYXJzLWFwcC5kZXZcL3YxXC9hdXRoXC9zaWduSW4iLCJpYXQiOjE0ODkzMTY1ODgsImV4cCI6MTQ5MTkwNDk4OCwibmJmIjoxNDg5MzE2NTg4LCJqdGkiOiIwNzdiN2NjYjNlODE4MDU2NjBiMWNjYTkzZjI1ZTZmMyJ9.Y_BvVnJIq8k3uN1sQQuBna1CcLsrn7VnpH3RxXS8JEQ'
        }
    }
});
echo.channel('user-channel.5').listen('NewMessage', (e) => {
    console.log(e);
});

After running laravel-echo-server and call event, below logs show in console that shows event broadcasts to channel :

[2:26:05 PM] - Xt_VSaSRHirHHxtUAAAE left channel: user-channel.5 (transport close)
[2:26:06 PM] - FwfOFMZqfrI9_H11AAAF joined channel: user-channel.5
Channel: user-channel.2
Event: NewMessage
CHANNEL user-channel.2
Channel: user-channel.1
Event: NewMessage
CHANNEL user-channel.1
Channel: user-channel.5
Event: NewMessage
CHANNEL user-channel.5

But Echo could not listen to channels and occurred events.

What is problem?

Answer 1

I have faced the same problem for days while Laravel Horizon shows success message:

[2019-07-18 15:18:50][123] Processing: App\Events\EventClass
[2019-07-18 15:18:50][123] Processed:  App\Events\EventClass

and Laravel Echo Server also shows success message:

[5:18:27 PM] - xxxxxxxxxx left channel: laravel_database_testChannel (transport close)
[5:18:28 PM] - xxxxxxxxxx joined channel: laravel_database_testChannel
Channel: laravel_database_testChannel
Event: App\Events\EventClass

Below is how my broadcastOn() function in EventClass looks like:

public function broadcastOn()
{
    return new Channel('testChannel');
}

As you can see, I broadcast my event in the testChannel channel. But somewhere the channel name is prefixed with laravel_database_.

Tip! Thus, to find out the right channel name to join, you should find that in the Laravel Echo Server message. Then you will be sure you use the right channel name.

Furthermore, I join the channel en listen to event without . sign as following:

Echo.channel('laravel_database_testChannel').listen('EventClass', (e) => {
     console.log(e);
});

Everything works fine this way. Hope this will save someone's time when facing the same problem.

Answer 2

I found the solution.

According to this comment on laravel-echo-server github page,The event name needs to be prefixed with a dot. like this :

echo.channel('user-channel.5').listen('.NewMessage', (e) => {
    console.log(e);
});