This episode is for members only

Sign up to access "Build a Multi-room Realtime Chat with Livewire and Reverb" right now.

Get started
Already a member? Sign in to continue
Playing
11. User joining and leaving events

Transcript

00:00
So we saw the issue in the last episode where when we join the room or when we hit the page, it will give us a list of the users who are currently here, but it won't set or remove them when they're leaving or joining. So let's go ahead and create a couple more events on our presence channel to include this. OK, so when a user joins, we want to push them to this list. So let's go ahead and create out a method to deal with when a user joins.
00:29
So we're going to say set user joining and into here we are going to get the user or the object of that ID of the user who is joining. OK, so we can pretty much copy and paste the event here because we just really need to change the event name, which is joining. And now we just want to push to that list of IDs. So let's go and just push on that user ID.
00:56
So remember, this contains an array now of just the ID. OK, now that we've done this, let's take a look at this in action. So I'm going to go back over to the dashboard on Mabel's account, refresh here, and then I'm going to join this room. So let's go over to chat and Laravel.
01:12
And there we go. You can see that Mabel has been pushed to the stack. OK, so now that we've done that, let's look at the leaving event. So I'm going to go and paste this down.
01:20
And sure enough, you guessed it. We're going to have a leaving event. Let's set set user leaving and we'll get that user in there. Now, this one's slightly more complex because we want to remove this item from this list.
01:34
There's a few ways to do this, but let's go ahead and reassign IDs to a filtered version of the current IDs. So we'll pass in this IDs. This is just a native PHP function. We'll have a closure just in here, which we can pull the current ID.
01:52
We're iterating through. Let's bring user into scope and then let's just return the condition that we need to remove that user. And that is just that the ID that we're iterating through is equal to the user ID who has left. And that will just get rid of it from this array.
02:10
OK, let's try this out and see what happens. So let's refresh both pages just to make sure. And yeah, we use the wrong condition here. So it's got rid of the user who didn't leave or all of the users who didn't leave.
02:23
So we need to say doesn't equal and we won't use a strict type there just in case they are different types. OK, let's try this again. So I'm going to go back over to chat, refresh both pages. Mabel is going to leave.
02:37
And there we go. She has been removed from the list of users. If we go back over to that room, sure enough, she's added back in. So all of this is now kept nicely up to date with all of the users who are in the room, whether they join or whether they leave.

Episode summary

In this episode, we're tackling the issue of keeping our user list up to date in real time when folks join or leave a room. Previously, we set things up so that when the page loads, we get a list of users currently in the room, but there wasn't anything in place to handle changes as people come and go. Time to fix that!

First up, we add a new event to handle when a user joins. We write a method that listens for the join event, grabs the new user's info, and pushes their ID to our presence list. We then test it out: when someone jumps into the room, they're added to the list immediately, and we can see that in action.

Next, we handle users leaving. This is a bit trickier because instead of adding, we need to remove the user from our array. We use PHP's array filtering to create a new list that leaves out the departing user's ID—making sure our condition is set correctly so we don't remove the wrong one!

Finally, we test that leaving works as expected. After fixing a small logic bug (using != rather than ==), users are properly removed from the list. With those tweaks, our users list now updates in real-time whenever someone joins or leaves, giving us a much better and more dynamic experience.

Episode discussion

No comments, yet. Be the first!