Unwanted unsubscription from Pusher channel when browser refreshes

@Sinnbeck That's true, perhaps I have badly explained the problem.

browser 1 / user 1

browser 2 / user 2

When refreshing the page with browser 1, the browser 2 shows only user 1 connected and not user 2.

@vincent15000 but it shows up the second it reconnect I assume?

@Sinnbeck previous message updated => no, when browser 1 refreshed, user 1 is automatically reconnected, on browser 1 I see user 1 and user 2 connected, and on browser 2 I only see user 1 connected whereas it's the browser of user 2 who hasn't disconnected.

@vincent15000 oh. Maybe you aren't handling the joining event properly? https://laravel.com/docs/9.x/broadcasting#joining-presence-channels

@Sinnbeck I do like this with Livewire.

protected $listeners = [
    'echo-presence:connected-users,here' => 'updateConnectedUsers',
    'echo-presence:connected-users,joining' => 'userConnecting',
    'echo-presence:connected-users,leaving' => 'userLeaving',
];

...

public function userConnecting($userId)
{
    array_push($this->usersIds, $userId['id']);
}

...

public function render()
{
    $users = User::whereIn('id', $this->usersIds)->orderBy('name')->get();

    return view('livewire.connected-users-component', compact('users'));
}

@vincent15000 could you try

public function userConnecting($userId)
{
    $this->userIds = array_push($this->usersIds, $userId['id']);
}

@Sinnbeck It doesn't work better.

Or put a dd() to check if it's called

@Sinnbeck Already done, yes it's called.

@vincent15000 so it gets the correct ID on the browser that isn't working but does not update the user ID list?

@Sinnbeck The user ID list is updated in the browser that is refreshed, but not in the other browser.

And the dd displays ok in the other browser for userLeaving and userConnecting.

@vincent15000 also with the correct ID? It isn't the users own ID? (the none working browser)

@Sinnbeck No that's the correct id for both events.

But I just found the real problem.

While refreshing, the subscription event is before the unsubsciption event, the exact opposite of what I see on the pusher debug page.

And that's very strange because the disconnected / reconnected user 1 appears in browser 2 (not user 2).

@vincent15000 ok sounds like a problem with livewire, not pusher. It does not update the array for some reason. Maybe try using the debugger to see if it gets updated wrong or something https://chrome.google.com/webstore/detail/livewire-devtools/dnociedgpnpfnbkafoiilldfhpcjmikd

@vincent15000 oh that's interesting! Never used it with livewire, but I'll help you look around for a solution. It works with echo, that much I know

@Sinnbeck The array contains the right ids, the problem is that the component doesn't refresh (only refreshes for disconnection event and not refreshing for connection event). I have seen that thanks to the plugin you suggested me.

@vincent15000 but didn't you just say it was reversed in order?

@Sinnbeck Yes I said that ... I have added dd() in both listeners and the userConnecting method is executed first, before the userLeaving method.

@vincent15000 that would indeed cause a problem. 🤔

I stumbled upon this old thread by you where you add it in Javascript as well. Do you still have that? https://laracasts.com/discuss/channels/livewire/livewire-and-presence-channel

@Sinnbeck This was the problem.

public function userLeaving($userId)
{
    $index = array_search($userId['id'], $this->usersIds);
    $this->usersIds = array_splice(
        $this->usersIds,
        $index, // I have to write here : $index - 1
        1
    );
}

But that's strange because array_search returns the key in the array, for me it's a simple array with just values, so the keys are the indexes.

@Sinnbeck I didn't find the real solution for this old post. I used a JS script, but now I want to do something only with Livewire.

But my solution $index - 1 works only with two users, when I have three or more users, it doesn't work any more.

@vincent15000 yeah the old post was in case you still had both.

@vincent15000 to remove the user, you could easily just use array_filter()

@Sinnbeck Oh what a good idea ... now it works.

Thanks for the Livewire dev tool, I didn't know it.

So the problem was related to how I deleted the user id from the array.

Thank you ;).

@vincent15000 awesome 👍. Yeah an array filter is awesome. So simple