Nuxtjs 页面中未收到推送器事件

Question

我使用 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 的调试控制台中：

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

Answer 1

看来问题出在 @nuxtjs/laravel-echo 的 v1.1.0。

我用过：

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

虽然它的 document 说要使用：

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

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

Nuxtjs 页面中未收到推送器事件

Pusher events are not received in Nuxtjs pages

javascript

vue.js

laravel-echo

pusher-js

nuxtjs