A real-time counter showing the viewers of a news article on a website using Laravel Jetstream.
.leaving(user => {
this.participants.splice( this.participants.indexOf(user, 1));
})
.joining(user => {
this.participants.push(user);
this.count++;
})
I have observed a strange behavior where the user with the smallest ID value gets removed when there are multiple users on the page. This theory has been successfully tested.
For example, if Joe logs in with user ID 100 and then Jimmy logs in with ID 200, both users should be displayed in a list.
On Jimmy's screen:
- Joe
- Jimmy
If Joe refreshes the page, it removes Jimmy from the active users list and then adds him back in, resulting in Jimmy appearing twice on Joe's screen after the refresh. The items remain correct for Joe regardless of who refreshes (enters or leaves).
On Jimmy's screen:
- Joe
- Joe
It seems like the index is incorrect, causing the splicing to not work properly and instead removing the last item in the list and replacing it with the lower ID user.