Build a Multi-room Realtime Chat with Livewire and Reverb
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
10. Showing online users

Episodes

0%
Your progress
  • Total: 1h 23m
  • Played: 0m
  • Remaining: 1h 23m
Join or sign in to track your progress

Transcript

00:00
OK, let's talk about presence channels. Now, presence channels don't mean that we need to define out another channel
00:06
in order to determine what users are in the room. All we need to do is return some sort of ID or some information about who is in our current channel. So before we get to go ahead and create out the component to show these users,
00:22
let's hop back over to our channels and do something slightly different inside of here. Now, by changing this, this doesn't mean that you can't authorize. We're not authorizing at the moment. But all this means is the last thing that you return inside of here
00:40
needs to be some sort of identifier for the user. So, for example, you could have an if statement up here. And if in some circumstance the user isn't authorized to access the channel so we could say if true, then you'll want to return false from up here
00:57
And then finally, you want to go ahead and return some identifier about the current user so you can still authorize. But effectively, we just want to change around what is returned here in order to show who we're dealing with.
01:15
So inside of these channels, you can see up here we do get the user. So let's pull that user into our current channel. This is the user who is trying to access this channel and authorizing this channel. And rather than a standard array, let's just say user only ID.
01:34
Now, of course, we want to show the user's name. We could pass the user's name through to here as well. But we're just going to pass the ID and then refetch these from the database on the client side.
01:47
And there's a good reason for that. It means that we can then continue to access relationships on that user or any other methods that we have on that user model. That doesn't make sense.
01:56
We'll see this in just a moment. OK, so we've only made a really simple change. Just return all of the IDs of the users who are connected to this channel. So each of the rooms.
02:07
Now what we can do is go ahead and create a component to listen for any of the presence events that we get. So we're going to go and just create out a simple user's component. I'm going to take all of this in here.
02:20
And let's create out a live wire component specifically for this. So let's use live wire to make out a chat users component. And let's put that directly into here. So let's say chat users.
02:35
And we'll head over to the template for this and just paste in what we have before. So there shouldn't be any difference now in what we have. OK, so what we're going to do is add in a simple header just to show that we are in this section.
02:49
So let's say text large and we'll say font semi bold. And that should be enough for now. Great. Now in the actual component itself. So let's open up the user's component.
03:02
What do we need to store in here in order to work out who is in this room? Well, we're only returning the user's ID from the presence channel. So we're going to go and create out a property that's going to store an array of user IDs.
03:17
Then what we can do is create a computed property to fetch these users as in a model. And then that means that we have a model that we can continue to access methods on. Otherwise, we're just going to be sending loads of data into this presence channel and we're not going to have access to anything else on the user model.
03:33
OK, so more importantly, we need to pick up who is in this channel. So let's create out a method that's going to assign all of the IDs to this property. So let's say set users here and we will get a list of the users that we return from that presence channel.
03:56
So we need to listen to an event for this. Let's do that first of all, dump it out and then we'll set the IDs and get these users. So we're going to say on. So we're going to do exactly the same thing as we did with echo to listen for a new message.
04:10
But this time we're going to say echo presence. We give the same channel name because we know that we don't need to define a different channel for this. So it's going to be room and then room ID, which we don't have passed in at the moment.
04:23
But let's go ahead and add in anyway. And then the event that we want to listen to is here. So this will just in one swoop give us a list of the users that are in this channel. OK, let's just die down on these users.
04:37
We'll pass the room through to this component. So we have that available or you could just pass the room ID. It doesn't really matter. And let's update that over in room show.
04:47
So let's pass the room into there as well. OK, so now when we come over, you can see that already we get a die dump of the IDs of the people who are in this room. And this happens for all of the users.
05:00
We give that a refresh. You can see that this just gives us two here and this gives us one and two. But that's just because we refreshed one of them and it didn't quite catch the other use that has joined.
05:12
But once we push these to an array, it will always show all users. OK, now that we've got these, let's figure out how to push them. So we really just want to set the IDs in here and grab out the user ID. But we want to pluck these.
05:27
So let's use the array helper in Laravel to pluck from that users array, just the ID. So we just want to pluck out the ID. OK, so now that we've got this, just before we start to list through them, let's go over here and just var dump on the IDs that we have just to see if this is accurate.
05:49
So if I refresh both of these, you can see we've got user one and two in both of these rooms that is working nicely. Now we just need to extract these from the database so we can iterate through them and show everything that we need.
06:04
So we are going to create up here a computed property that's always going to return to us a collection of users. So let's make this computed. So let's say computed.
06:16
And all this will allow us to do is have a computed property that however many times we access it, it will always return us the same thing. You can even cache this and you could unset the cache if you wanted to keep things a lot faster.
06:30
We might look at that later. So let's go ahead and say user find this IDs. We pass a bunch of IDs in and get a collection of all of the users in this channel. That is all we need to do.
06:43
So over in the users template, now we can just start to iterate through each of the users and output any information about them. So let's say for each users as user. And just to give you a demonstration of this, we can now say something like user avatar.
06:59
So if within that presence channel, we just set the user's ID and name, we wouldn't be able to access this method because it wouldn't be a model. So I find this method a lot more convenient. Okay.
07:10
So we've got undefined users because we set this as a computed property. We need to access it as a property. And there we go. We've now got each of the users avatars.
07:18
Now we're not going to do that, but feel free to, of course, style this out however you need. Let's go ahead and just output a proper list of users. So I'm just going to make this an unordered list in the root here.
07:31
And for each of the users, we're going to have a list item with the user's name. So let's output the user's name in here and we'll space these out with a Y of one. And why don't we just style this up really quickly as well. So I'm going to set this to flex items end because eventually we're going
07:51
to have a little typing indicator. Let's say justify between, and we'll set a space X of one background of gray, 100 say, and we'll set this to rounded large sets and padding on the X and Y axis, and that's just going to give us a little simple container with all them users.
08:11
Okay, great. So we're now getting a list of all of the users who are connected to the channel. But the only issue is if we were to head back to the dashboard for Mabel and give the page a refresh, Mabel hasn't left the room.
08:25
And if we refresh this, obviously we get a list of who's in there. When Mabel joins that room, she doesn't appear in this list. So we need to do a little bit more work and hook into some other events to get when people leave and when people join to keep this list up to date.

Episode summary

In this episode, we're diving into how to show which users are currently online in a chat room by making use of Laravel's presence channels.

We start off by tweaking our channel authorization logic so that, instead of just returning a static value, we actually return some important info about the current user (in this case, their user ID). This way, when users join the channel, their identifiers are broadcasted and we can track who's present. The logic stays simple—return false if a user isn't allowed, and otherwise return their ID.

Instead of sending big blobs of user data through the channel, we're deliberately keeping it slim by just sending the ID. On the client side, we'll use these IDs to fetch the actual user details directly from the database. This has the added benefit that we can keep using all the relationships and methods on the User model, rather than dealing with a bunch of plain data.

Next, we spin up a new Livewire component called ChatUsers. This component listens for presence events (using Echo) and keeps track of which user IDs are in the room. We add a computed property that fetches the user records by their IDs, making it really easy to output detailed user info like their name, avatar, and more.

We finish by updating the component template to display a nice list of users who are currently in the channel, complete with some basic styling. You’ll spot that we still need to listen for join/leave events to keep things perfectly in sync (e.g., when someone leaves or joins in real time), and we’ll get to that in the next steps!

So by the end of this video, you’ll have set up the backend and frontend needed to show a live, updating list of online users in a chat room using presence channels and Livewire.

Episode discussion

No comments, yet. Be the first!