Laravel (Echo, Sanctum, websockets) + Pusher + Nuxtjs SPA - laravel

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"}}]

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);
});
}
};
},
})