通过Nuxtjs中的Laravel Echo获取实时Pusherjs连接状态

问题描述

我想检查NuxtJs页面中Pusherjs中$echo的连接状态。

当我使用时：

mounted(){
   this.connection = this.$echo.connector.pusher.connection.state;
}

它可以工作，但是它只会设置初始连接状态为connecting并且是静态的。

但是当我使用时：

computed:{
   connection: this.$echo.connector.pusher.connection.state
}

它返回错误：

TypeError
Cannot read property '$echo' of undefined

那么如何实时通知我连接状态？

解决方法

我找到了解决方法：

this.$echo.connector.pusher.connection.bind("state_change",(states) => {
   // states = {previous: 'oldState',current: 'newState'}
});

参考： https://pusher.com/docs/channels/using_channels/connection#binding-to-all-state-changes