Nuxtjs 页面中未收到推送事件答案

【问题标题】：Pusher events are not received in Nuxtjs pagesNuxtjs 页面中未收到推送事件
【发布时间】：2020-12-14 06:42:10
【问题描述】：

我使用 laravel-echo 在 Nuxtjs 中使用 pusherjs。

nuxt.config.js 部分用于 pusherjs 配置：

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>

我通过 Pusherjs 的 Debug Console 手动发送事件，但在 chrome 的控制台中没有任何反应。

我确定密钥和我的应用程序已正确连接到 pusherjs；因为当我刷新页面时，日志出现在 pusherjs 的调试控制台中：

那么为什么前端没有收到事件呢？

【问题讨论】：

标签： javascript vue.js laravel-echo pusher-js nuxtjs

【解决方案1】：

问题似乎是因为v1.1.0 的@nuxtjs/laravel-echo。

我用过：

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

代替：

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

问题解决了！（只需将on 替换为listen）

参考：

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

【讨论】：

【解决方案2】：

我有以下几点：

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

我必须使用：

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

虽然它的document 说要使用：

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

意味着我必须链接“on”方法而不是“listen”。希望，这会有所帮助！

【讨论】：