首页 文章

Laravel Echo存在通道与vue路由器不兼容

提问于
浏览 次
0

该应用程序是一个聊天应用程序，使用laravel和Vue，一旦用户登录他看到所有在线用户的列表，我在主页的已安装组件中调用Echo包装器以显示所有在线用户，它可以工作并显示它们，问题现在是如果我去另一个页面（通过Vue路由器）然后回到主页它不显示在线用户列表...除了手动我再次刷新页面 . 以下是我的代码片段：

mounted () {
// alert('Shoud work')
// console.log(Echo)
Echo.join('online')
.here((users) => {
  alert(JSON.stringify(users))
    this.users = users
})
.joining((user) => {
    this.users.push(user)
})
 .leaving((user) => {
    this.users = this.users.filter(u => (u.id !== user.id));
    })
  }
}
laravel vue.js pusher laravel-echo

1 回答

  • 0

    尝试使用组件 destroyed 方法离开通道 . 由于你从不离开 Channels ，一旦你回来，问题可能是 Echo.join 将不会再次加载，因为用户已经在 Channels 上，因此，不会触发负责加载组件的 .here users 属性与聊天用户数组 .

    mounted () {
    Echo.join('online')
    .here(users => {
        this.users = users
    })
    .joining(user => {
        this.users.push(user)
    })
    .leaving(user => {
        this.users = this.users.filter(u => (u.id !== user.id));
    })
},
destroyed() {
    Echo.leave(user => {
        this.users = this.users.filter(u => (u.id !== user.id));
    });
}

    要么

    mounted () {
    Echo.join('online')
    .here(users => {
        this.users = users
    })
    .joining(user => {
        this.users.push(user)
    })
    .leaving(user => {
        this.removeUser()
    })
},
destroyed() {
    Echo.leave(user => {
        this.removeUser()
    });
},
methods: {
    removeUser(user) {
        this.users = this.users.filter(u => (u.id !== user.id))
        // Any other reusable code...
    }
}
    回复于

相关问题