Laravel Echo 存在通道不能很好地与 vue 路由器一起工作

Question

该应用是一个聊天应用，使用laravel和Vue，一旦用户登录他会看到所有在线用户的列表，我在主页的挂载组件中调用Echo wrapper来显示所有在线用户，它工作并显示他们，现在的问题是如果我转到另一个页面（通过 Vue Router）然后返回主页它不显示在线用户列表......除了手动刷新再次翻页。下面是我的代码片段：

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...
    }
}

更新：

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

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

Laravel Echo 存在通道不能很好地与 vue 路由器一起工作

Laravel Echo presence channel not working well with vue router

laravel

pusher

vue.js

laravel-echo