Unable to read events from Laravel echo in vue

Hello,

"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.

Hi, I found this thread a couple of years later, and I got the same error, Did you manage to fix this problem?