Laravel回声存在信道与vue路由器工作不好

Question

该应用程序是一个聊天应用程序，使用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));
})
}
}

Answer 1

尝试使用组件destroyed方法离开通道。由于您从未离开过该频道，一旦您回来，问题可能是Echo.join不会再次加载，因为用户已经在该频道上，因此不会触发.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...
}
}

更新：

如果您想让用户在整个应用程序中保持"登录"状态，一种方法是创建一个"会话"组件。该组件可以有模板，也不能有模板，但是，它需要在每个页面上保持加载状态。若要访问此会话组件之外的用户列表，您可以将用户数据存储到浏览器的本地存储中，使用全局变量(例如window.seession.users(，或者如果可用，使用Vuex。无论哪种方式，只要用户阵列可供其他组件使用，会话组件就会在用户离开或加入应用程序(或聊天…或您在其中实现的任何加入/离开规则(时保持该信息的最新状态。

例如，假设您创建了一个名为session的组件。您可以使用<session></session>轻松地将其放置在顶部导航组件模板中。由于会话组件自己的模板是空的，所以它不会影响顶部导航。但是，它将被呈现，允许您管理用户的联机状态。