Канал присутствия Laravel Echo не работает с Vue Router - PullRequest
Новая
       25

Канал присутствия Laravel Echo не работает с Vue Router

0 голосов
/ 09 декабря 2018

Приложение представляет собой приложение чата, использующее laravel и Vue. Когда пользователь входит в систему и видит список всех онлайн-пользователей, я вызвал оболочку Echo в смонтированном компоненте домашней страницы, чтобы показать всем онлайн-пользователям, что она работает.и показывает их, проблема теперь в том, что если я перехожу на другую страницу (через 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));
    })
  }
}

1 Ответ

0 голосов
/ 11 декабря 2018

Попробуйте выйти из канала, используя компонент 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.session.users), либо, если доступно, использовать Vuex.В любом случае, пока массив пользователей доступен для использования другими компонентами, компонент сеанса будет поддерживать эту информацию в актуальном состоянии, когда пользователи выходят из приложения или присоединяются к нему (или к чату ... или к любому другому правилу присоединения / выхода, которое вы реализуете там)..

Например, допустим, вы создали компонент с именем session.Вы можете легко поместить его в шаблон верхнего компонента навигации, используя <session></session>.Поскольку собственный шаблон компонента сеанса пуст, это не повлияет на верхнюю навигацию.Однако он будет обработан, что позволит вам управлять состоянием пользователя в сети.

...