Couldn't listen from pusher.

[kingRayhan]

Hi I am struggling to connect laravel-echo with pusher. I am broadcasting data from a laravel backend but in nuxt I couldn't listen to that data.

I am confused if I did some wrong.

Here is my nuxt.config.js configuration

buildModules: [
    // ....
    "@nuxtjs/laravel-echo",
],

echo: {
    broadcaster: "pusher",
    key: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    cluster: "mt1",
    plugins: ["~/plugins/echo.js"],
    // auth
    authModule: true,
    connectOnLogin: true,
    disconnectOnLogout: false,
}

In one point of debugging, I tried to listen to data triggered by pusher Event Creator with channel name my-channel and event name my-event

And then I tried to listen this event from a component like this.

  mounted() {
    this.$echo.channel("my-channel").listen("my-event", (e) => {
      console.log(e);
    });
}

But got nothing

Please help me to figure out the actual problem. I am sure I am doing some wrong or bad practice here but couldn't manage to solve that.

[shoaibsharif]

I had the same issue. I use .on instead of .listen. In other word, try this:

 mounted() {
    this.$echo.channel("my-channel").on("my-event", (e) => {
      console.log(e);
    });
 }

[kingRayhan]

Thank you much @shoaibsharif I struggled a lot to figure it out but the readme doc did not help me. Thanks, man <3

[sts-ryan-holton]

I'm not seeing any data come through to my Nuxt JS project, even when I manually send the event, I get nothing in the socket field. This is my config:

echo: {
  broadcaster: 'pusher',
  key: 'websocketkey',
  host: 'http://localhost:6001',
  plugins: [ '~/plugins/echo.js' ], // nothing really in this file
},

My laravel project has the websockets server running, and when I send a message I see:

Connection id 104448769.26246612 sending message {"event":"log-message","channel":"private-websockets-dashboard-api-message","data":{"type":"api-message","time":"10:44:57","details":"Channel: private-agents, Event: App\\Events\\AgentStats","data":"{\"agent\":{\"id\":42,\"agent\":\"test\",\"platform\":\"darwin\",\"cpuUsage\":95,\"memTotal\":16000,\"memFree\":4000,\"diskSpaceTotal\":90000,\"diskSpaceFree\":15000,\"uptime\":120000,\"checked_at\":\"2021-02-01 13:50:00\",\"created_at\":\"2021-02-02T10:44:57.000000Z\",\"updated_at\":\"2021-02-02T10:44:57.000000Z\"}}"}}

Which indicates the server receives the message, but doesn't send it back to the Nuxt JS project?

this.$echo.channel("agents").on("AgentStats", (e) => {
    console.log(e);
});

is how I'm listening.