Unable to read events in Laravel Echo - laravel

Question

"laravel-echo": "^1.6.0",
"pusher-js": "^5.0.2",
I am using Laravel WebSockets to send events to my Vue.js app using Laravel Echo as:
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
First of all when I connect my app, I see this message:
Connection id 473581849.201555836 sending message {"event":"pusher:connection_established","data":"{\"socket_id\":\"473581849.201555836\",\"activity_timeout\":30}"}
When I disconnect, I see this one:
Connection id 603442282.571320345 closed.
So the app is well communicating with the Laravel WebSocket, no problem with that as it received the connection and connection packets from my app.
My problem comes when I try to read in my front end a packet from the server, I just cannot get it.
const echo = new Echo({
broadcaster: 'pusher',
cluster: process.env.WEBSOCKET_CLUSTER,
key: process.env.WEBSOCKET_KEY,
wsHost: process.env.WEBSOCKET_URL,
wssHost: process.env.WEBSOCKET_URL,
wsPort: process.env.WEBSOCKET_PORT,
wssPort: process.env.WEBSOCKET_PORT,
encrypted: process.env.WEBSOCKET_ENCRYPTED,
disableStats: process.env.WEBSOCKET_DISABLE_STATS,
enabledTransports: ['ws', 'wss']
// auth: {
// headers: {
// 'Accept': 'application/json',
// 'Authorization': 'Bearer ' + window.localStorage.getItem('accessToken')
// }
// }
});
export default ({ Vue }) => {
Vue.prototype.$echo = echo;
};
Here is for example an event received(this is what I get from the ssh console):
Connection id 545411452.62710705 sending message {"event":"log-message","channel":"private-websockets-dashboard-api-message","data":{"type":"api-message","time":"20:06:24","details":"Channel: androidMobile, Event: App\\Events\\UpdateAndroidNavBarCounts","data":"{\"message\":{\"countincompletereports\":0,\"countviewmyreports\":1002,\"countpoints\":300,\"user_id\":63}}"}}
This event here: App\Events\UpdateAndroidNavBarCounts
I cannot get it in my front end, I tried this:
this.$echo.channel('androidMobile')
.listen('.App.Events.UpdateAndroidNavBarCounts', function (data) {<------------
console.log('This is a test 2');
this.$store.dispatch('common/UpdateAndroidNavBarCounts', data, { root: true });
})
this
this.$echo.channel('androidMobile')
.listen('App.Events.UpdateAndroidNavBarCounts', function (data) {<------------
console.log('This is a test 2');
this.$store.dispatch('common/UpdateAndroidNavBarCounts', data, { root: true });
})
this:
this.$echo.channel('androidMobile')
.listen('.UpdateAndroidNavBarCounts', function (data) {<------------
console.log('This is a test 2');
this.$store.dispatch('common/UpdateAndroidNavBarCounts', data, { root: true });
})
and even this:
this.$echo.channel('androidMobile')
.listen('UpdateAndroidNavBarCounts', function (data) { <------------
console.log('This is a test 2');
this.$store.dispatch('common/UpdateAndroidNavBarCounts', data, { root: true });
})
I never managed to see the console.log('This is a test 2'); message.
Any help would be appreciated please as I have been struggling on this for days and days and I am starting to believe that it is a bug.
Thank you.

Answer 1

oK, with time I worked it out ...
I was using the Quasar framework and this was the top of my boot file:
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Pusher.logToConsole = true;
When I added this logToConsole = true; parameter, I could start seeing the communication from the Android mobile to the API.
My problem was this:
authEndpoint: process.env.WEBSOCKET_AUTH_URL
let's say WEBSOCKET_AUTH_URL = https://mywebsite.com
No idea why but if I add this:
authEndPoint: process.env.WEBSOCKET_AUTH_URL + '/broadcasting/auth'
It does not work, the url is broken into 2 strings.
I also tried this:
authEndPoint: JSON.stringify(process.env.WEBSOCKET_AUTH_URL) + '/broadcasting/auth'
No luck either, so instead I added the whole url in the .env file as:
WEBSOCKET_AUTH_URL = https://mywebsite.com/broadcasting/auth
Now it works.