Live counter of who is viewing a news article on a website. Laravel Jetstream.

 .leaving(user => {
     this.participants.splice( this.participants.indexOf(user, 1));
})

 .joining(user => {
             this.participants.push(user);
            this.count++;
   })

However I noticed that if there are two users on the page it keeps removing the one with the smallest ID value. Tested the theory successfully.

So if joe logs in user ID 100 and then Jimmy logs in ID 200. Shows both users in a list.

Jimmy's screen:

• Joe
• Jimmy

If Joe refreshes the page it removes Jimmy from the active users and places him in again as an active, Shows him twice on his screen after the refresh. The items remain correct for Joe regardless of who refreshes (enters or leaves).

Jimmy's screen:

• Joe
• Joe

It's like the index isn't correct and hence not splicing properly just removing the last item on the list and repopulating it with the lower ID user.