2

I use laravel-echo for working with pusherjs in Nuxtjs.

nuxt.config.js section for pusherjs configuration:

buildModules: [
    [
      '@nuxtjs/laravel-echo', {
        broadcaster: 'pusher',
        key: 'my-key-here',
        cluster: 'eu',
        forceTLS: true
      }
    ]
  ],

package.json

"vue": "^2.6.12",
"nuxt": "^2.14.3",
"pusher-js": "^7.0.0",
"@nuxtjs/laravel-echo": "^1.1.0",

pages/test.vue

<script>    
export default {
  mounted() {
    this.$echo.channel('ch').listen("ev", (res) => {
      console.log(res);
    });
  },
};
</script>

I manually send Event via Pusherjs's Debug Console but nothing happens in chrome's console.

pusherjs debug console

I'm sure the key and my app is connected to pusherjs correctly; because when I refresh the page, the logs appear in pusherjs's debug console:

enter image description here

So why are the events not received in front end?

Fred II
  • 581
  • 2
  • 11
  • 23

2 Answers2

2

It seems the problem was because of v1.1.0 of @nuxtjs/laravel-echo.

I used:

this.$echo.channel("ch").on("ev", (res) => {
    console.log(res);
});

instead of:

this.$echo.channel('ch').listen("ev", (res) => {
    console.log(res);
});

And the problem solved! (just replace on with listen)

Reference:

https://github.com/nuxt-community/laravel-echo/issues/17#issuecomment-637520496

Fred II
  • 581
  • 2
  • 11
  • 23
1

I have followings:

"nuxt": "^2.14.3",
"pusher-js": "^7.0.0",
"@nuxtjs/laravel-echo": "^1.1.0",

And I've to use:

this.$echo.channel("channel").on("event", (res) => {
    console.log(res);
});

Although its document says to use:

this.$echo.channel("channel").listen("event", (res) => {
    console.log(res);
});

Means I've to chain "on" method instead of "listen". Hope, this will be helpful!

protanvir993
  • 2,759
  • 1
  • 20
  • 17