Laravel Echo never recieving event

Question

For whatever reason, I cannot receive any data on my client side from laravel echo. I am using laravel-echo-server (socket.io), redis broadcaster, and redis queues. As far as I can tell, they are all functional. I'll take you through how I set it up for testing. First I created a UserCreated event:

class UserCreated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $user;

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

    public function broadcastOn()
    {
        return new Channel('user-created');
    }

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

Then, to test this event, I created a CreateUser command:

class CreateUser extends Command
{
    protected $signature = 'create:user {username}';

    protected $description = 'Create a new user!';

    public function __construct()
    {
        parent::__construct();
    }

    public function handle()
    {
        $user = \Chatter\User::create([
            'name' => $this->argument('username'),
            'email' => uniqid() . '@gmail.com',
            'password' => bcrypt('secret')
        ]);
        event(new \Chatter\Events\UserCreated($user));
    }
}

Finally, here is my laravel-echo-server.json:

{
    "authEndpoint": "/broadcasting/auth",
    "authHost": "chatter.dev",
    "database": "redis",
    "databaseConfig": {
        "redis": {
            "port": "6379",
            "host": "localhost"
        }
    },
    "port": 6001,
    "protocol": "http",
    "sslCertPath": "",
    "sslKeyPath": "",
    "socketio": {}
}

Next I ran php artisan queue:listen, and laravel-echo-server start. They both ran without error. To make sure that the server worked, I did php artisan create:user Bob123. It was successful. The queue returned this (in console):

[2017-06-01 01:28:27] Processing: Chatter\Events\UserCreated
[2017-06-01 01:28:27] Processed:  Chatter\Events\UserCreated

And the laravel-echo-server returned this (in console):

CHANNEL user-created

So, to get the data I sent with the user, I created a Vue component, with a echo listener in the mounted function. Here's my component:

<template>
    <div class="container">
        <div class="row">

        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.');
            window.Echo.channel('user-created')
                .listen('.user.created', (data) => {
                    console.log(data);
                });
        },

        data(){
            return {
                messages: []
            }
        }
     }
</script>

When I refreshed my webpage, Component mounted was logged to the console so I'm certain that it loaded. But, for whatever reason, when I send the CreateUser command, the data is not logged into the browsers console.

Here is everything that you might point out:

I changed my broadcast driver to redis in my .env

BROADCAST_DRIVER=redis
CACHE_DRIVER=redis
SESSION_DRIVER=redis
QUEUE_DRIVER=redis

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

I also uncommented the BroadcastingServiceProvider in the app.php config.

I can't think of anything else right now that you might point out that I have done, but if I remember any others I will update the question.

Thanks for any help.

Note: I'm not familiar with Redis, so currently I'm leaning towards that being my problem. Simply adding predis\predis as a dependency simply doesn't feel like that's all I have to do. Hopefully this note helps.

Edit:

As suggested, I tried running redis-server before I ran laravel-echo-server. This is what was returned in the console:

vagrant@homestead:~/Code/Chatter$ redis-server
16342:C 01 Jun 05:45:38.066 # Warning: no config file specified, using the default config. In order to specify a config file use redis-server /path/to/redis.conf
16342:M 01 Jun 05:45:38.067 * Increased maximum number of open files to 10032 (it was originally set to 1024).
16342:M 01 Jun 05:45:38.067 # Creating Server TCP listening socket *:6379: bind: Address already in use

I assume this means that the redis server was running, so I guess homestead starts it automatically by default.

Github Repository:

Sorry this took so long, I was very busy personally. Here is the link to the github repository for this project. If there are any questions about the repository just let me know.

https://github.com/Dastur1970/laravel-echo-test

Edit 2:

Just in case anyone needs it, here is my the code I used to create my Echo instance.

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
    // auth: {
    //     headers: {
    //         'Authorization': 'bf242984230eb684 1076b91e572e5bbcc81a852471364c49'
    //     }
    // },
    // key: '1076b91e572e5bbcc81a852471364c497',
    // csrfToken: token.content
});

Commented out some of the stuff that I was testing with. Was not sure if I would need the again so I just left them commented. Let me know if any of the commented code may actually be helpful.

Answer 1

I have setup your GIT repo on my local PC and got the issue.

You are using a custom namespace called "Chatter", so you have explicitly defined that in your JS code so that Echo can know that how to find that Event class.

So just change "UserCreated" with ".Chatter.Events.UserCreated" in public/js/app.js and you are good to go:

mounted: function mounted() {
        console.log('Component mounted.');
        console.log(window.Echo);
        window.Echo.channel('user-created').listen('.Chatter.Events.UserCreated', function (data) {
            console.log('tester123');
        });
    },

More info: https://laravel.com/docs/master/broadcasting#namespaces

Answer 2

Okay, let's find the possible parts where you error could be:

This is the queue that the server is running through

1. Event
2. Listener
3. Redis
4. Laravel-echo-Server
5. Client

[2017-06-01 01:28:27] Processed: Chatter\Events\UserCreated

the event was successfully handled by the listener (step 2)

CHANNEL user-created

The event was written to the database and the laravel-echo-server got it (step 4)

Normally the laravel-echo-server prints a message when a new user joins a channel. I see none of those messages in your code so the connection between the laravel-echo-server and the client could be the problem. Also, I don't see any code where you create the Echo object on the client with Javascript.