nuxt.js - Laravel (Echo, Sanctum, websockets) + Pusher + Nuxtjs SPA

Question

I'm trying to send events to private channel, but I can't receive them. Otherwise it works fine for public channels.

Here's my code :

Plugin : Echo.js

window.Echo = new Echo({
    broadcaster: 'pusher',        
    key: process.env.MIX_PUSHER_PUBLIC_KEY,
    wsHost: process.env.VUE_APP_WEBSOCKETS_SERVER , //window.location.hostname,//
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsPort: 6001,
    forceTLS: false,
    /* key: process.env.MIX_ABLY_PUBLIC_KEY,
    wsHost: 'realtime-pusher.ably.io',
    wsPort: 443, */
    disableStats: true,
    encrypted: true,    
    auth: {
        headers: {
            'X-CSRF-TOKEN': Cookies.get('XSRF-TOKEN'),            
        },
    },

    authorizer: (channel, options) => {
        return {
            authorize: (socketId, callback) => {
                axios.post(process.env.VUE_APP_WEBSOCKETS_SERVER+'/api/broadcasting/auth', {
                    socket_id: socketId,
                    channel_name: channel.name
                })
                    .then(response => {
                        callback(false, response.data);
                    })
                    .catch(error => {
                        callback(true, error);
                    });
            }
        };
    },
})

Laravel Broadcasting.php :

'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'useTLS' => false,                
                'encrypted' => true,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http',
            ],

Api Routes :

Broadcast::routes(['middleware' => ['auth:sanctum']]);

Client Side :

 created() {                                
        Pusher.logToConsole = true;
        Echo.logToConsole = true;           
                
        window.Echo.private('shop')
            .listen('MessageSent', (e) => {
                console.log('Hi' + e)
        }) 
    },

I notice that pusher subscribed to the channel with no errors, but the result in console is like this :

Pusher :  : ["Event sent",{"event":"pusher:subscribe","data":{"channel":"private-shop"}}]

question from:https://stackoverflow.com/questions/65856972/laravel-echo-sanctum-websockets-pusher-nuxtjs-spa

Answer 1

Hi maybe this could help you. Please make sure that the response in the authorize function is used correctly. I realize after a while that the response token was send as response not response.data. Try this.

window.Echo = new Echo({
    broadcaster: 'pusher',        
    key: process.env.MIX_PUSHER_PUBLIC_KEY,
    wsHost: process.env.VUE_APP_WEBSOCKETS_SERVER , //window.location.hostname,//
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsPort: 6001,
    forceTLS: false,
    /* key: process.env.MIX_ABLY_PUBLIC_KEY,
    wsHost: 'realtime-pusher.ably.io',
    wsPort: 443, */
    disableStats: true,
    encrypted: true,    
    auth: {
        headers: {
            'X-CSRF-TOKEN': Cookies.get('XSRF-TOKEN'),            
        },
    },

    authorizer: (channel, options) => {
        return {
            authorize: (socketId, callback) => {
                axios.post(process.env.VUE_APP_WEBSOCKETS_SERVER+'/api/broadcasting/auth', {
                    socket_id: socketId,
                    channel_name: channel.name
                })
                    .then(response => {
                        callback(false, response);
                    })
                    .catch(error => {
                        callback(true, error);
                    });
            }
        };
    },
})