javascript - Nuxtjs 页面中未收到推送事件

Question

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

pusherjs 配置的 nuxt.config.js部分：

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

包.json

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

页面/test.vue

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

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

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

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

Answer 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

Answer 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);
});

虽然它的文件说要使用：

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

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