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?