Laravel Echo automatically disconnects first connected user

Question

I'm building a real-time chat using Laravel, Ably (Pusher) and Vue 3 and a presence channel.

Everything works great, but for some reason the first connected client gets disconnected automatically after ~10 seconds (the leaving event occurs for that user), but I'm still able to send messages (which are also received correctly by the other connected users).

I'm registering the events in my components, using the onMounted() hook (the user-left is emitted):

onMounted(() => {
    window.Echo.join('room')
      .here((users) => {
        emit('user-joined', users);
    }).joining((user) => {
        emit('user-joining', user);
    }).leaving((user) => {
        console.log(user);
        emit('user-left', user);
    }).listen('.message.new', (eData) => {
        data.messages.push(eData);
        data.message = "";
    }).error((error) => {
        emit('connection-error', error)
    })
})

Strangely enough, this only happens for the first connected user. If I open a new tab browser, with a different user logged in, it doesn't get disconnected.

In my bootstrap.js file, the configuration is unchanged from Laravel's scaffolding, so I'm not sure what I'm doing wrong. Is there anything I should take into consideration?

Answer 1

thanks for raising the issue! This is a common problem while using pusher-js as a client while connecting to ably in laravel. You should rather use official ably-laravel-broadcaster that uses native ably-js client to connect with ably. Under bug-fixes section, you can see this issue is already addressed.