Laravel Echo's listen on change not showing data

I'm building a real time notification feature for an app I'm working on. I' using Laravel 5.3, Node, Laravel Echo, Redis, and socket.io.

I have my events setup, node server listening on port 8888, redis pubsub is connection with node working. Everything on the backend is working.

One of my events:

class BecaCargada implements ShouldBroadcast
{
    use InteractsWithSockets, SerializesModels;

    public $usuario;

    public $mensaje;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Usuario $usuario, $mensaje)
    {
        $this->usuario = $usuario;
        $this->mensaje = $mensaje;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('channel-notificaciones');
    }
}

When I generate this event it gets fired and publishes on the change successfully, I can see that on redis-cli and also on the nodeJS code thats subscribed and listening to the same channel.

The is the nodeJS code that listens on the same channel:

require ('dotenv').config();

const server = require('http').Server();

const io = require('socket.io')(server);

const Redis = require('ioredis');

const redis = new Redis();

redis.subscribe('channel-notificaciones');

redis.on('message', function (channel, message) {
    const notificacion = JSON.parse(message);
    const emmitChannel = `${channel}:${notificacion.event}`;
    console.log(`Canal: ${emmitChannel}`);
    io.emit(emmitChannel, notificacion.data);
});

server.listen({
    host: process.env.NOTIFICACIONES_SOCKET_HOST,
    port: process.env.NOTIFICACIONES_SOCKET_PORT
});

And for my js code I only have this right now:

import Echo from "laravel-echo";

window._ = require('lodash');

window.io = require("socket.io-client");

const echo = window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: `${process.env.APP_URL}:${process.env.NOTIFICACIONES_SOCKET_PORT}`
});


echo.channel('channel-notificaciones')
    .listen('BecaCargada', (e) => {
        console.log(e);
});

After running gulp and refreshing, I open another tab and trigger the event. If I open dev tools and look at the frames tab in the socket connection I can see the incoming events clearly, channel:EventName, payload.

But nothing shows on the console from the console.log(e) code. I've inspected the echo variable and everything seems ok, the namespace, the channel.

Any thoughts on what could be wrong ?

Thanks and happy coding =)

via Chebli Mohamed