The next thing we're going to work on is the ability to see when other users of our workspace are online, our presence indicator. To do that we're going to use another feature of Laravel's broadcasting capabilities called Presence Channels. Presence Channels are just an extension of Private Channels, but they come with the added benefit of a couple of different lifecycle hooks. For instance, when we first join the channel, we have the ability to see which other users are already connected to the same channel, and we'll be notified when a new user joins the channel, or a user leaves the channel. Let's take a look at how that works. Now because we're not actually in the context of our channel anymore, this right hand side of the screen, the white section, we actually want to work in the context of our workspace. Here we are in our channel's routes file. We want to create a new route.

right hand side of the screen, the white section, we actually want to work in the context of our workspace. Here we are in our channel's routes file. We want to create a new route. So we can type BroadcastChannel, and we're just going to call this one Workspace. We're not worried about any route model binding on this because there is only one workspace at the moment, our Laravel workspace. And in a similar fashion to a PrivateChannel, doing so we will receive the currently authenticated user. So everything looks very similar to a PrivateChannel up until this point, but the difference with a PresenceChannel is rather than a boolean value, we need to return an array of information about that user. So in this case, we're going to say return array, and we're going to say ID as userID. I'm also going to pass through the name, name, userName. That's our presence authorization.

in this case, we're going to say return array, and we're going to say ID as userID. I'm also going to pass through the name, name, userName. That's our presence authorization set up and ready to go. When a new User connects to this channel, Laravel will go ahead and use this array of data to pass through to Reverb, which will store that information about that connected User on the channel so other users may have access to it. Inside our workspace Livewire component, we are including this Users component. That's the one we're going to work on for our presence indication. Here in our users.blade.php file, you can see that we're actually working with an Alpine component. We're going to set the data property to be an Alpine component called users, which we will see a little bit further down the page and we're going to iterate over a list of users displaying their avatar image. As

to be an Alpine component called Users, which we will see a little bit further down the page and we're going to iterate over a list of users displaying their avatar image. As part of their avatar image, we're going to display a little indicator that at the moment will always be completely transparent and show the user as offline. This is the part that we're going to make dynamic and show green when the user is online. And we're going to render their name. A little bit further down the page in the Alpine component, we've stubbed out some functionality here. We are setting the users property to be the users which are available to us in our Livewire component. We've got an empty init function, which we're going to update in a moment. And we have a couple of methods stubbed out for marking users online and offline. And all that's going to do is find the user in the

which we're going to update in a moment. And we have a couple of methods stubbed out for marking users online and offline. And all that's going to do is find the User in the users property of our component. And if they exist in the list of users which we pass through, we're going to set a property of online to true. Conversely, with offline, we're going to do something very, very similar. But if we find that user, we're going to set their online property to false. Back up in our init function, we want to connect to our presence channel. And we can do that by saying Echo.join. And we want to pass in the name of the channel which we created in our channels routes file earlier. So in this case, it's called workspace. And what we get now with this presence channel is three lifecycle hooks which we can use. First one is here. This one is invoked when we first join the

it's called workspace. And what we get now with this presence channel is three lifecycle hooks which we can use. First one is here. This one is invoked when we first join the channel. So here we get a list of the users who are already connected to the channel. And all we want to do here is call our method to mark them as online will pass through the users. Okay, so that gives us a list of users who are online when we access this channel, but it's not going to do anything for us at the moment, it's not going to change any of that behavior on the front end, because further up the page, where we integrate with our presence indicator icon, we are hard coding this to be offline at the moment. So let's make this a little bit more dynamic. And we can do that by saying class equals, and we can use object syntax here, we can say bg-green-600 and border-green-600 only when the user is online. And we can

little bit more dynamic. And we can do that by saying class equals, and we can use object syntax here, we can say bg-green-600 and border-green-600 only when the user is online. And we can borrow these classes from up here. And we can do something similar when the user is offline. So we can set the background to be the color of the sidebar. And we can set the border to be gray, only when the user is not online. And you can see here that now my presence indicator is green, to let other users know that I am online. And we'll show that in a moment side by side. So you can see two users online, but there's a couple of things that we need to wrap up first. To wrap this up, we need to hook into two more methods which are available with presence channels. We want the joining method. And this will tell us anytime a new user joins that channel, we're going to grab that user. And again, we're going to pass them through to the mark

We want the joining method. And this will tell us anytime a new User joins that channel, we're going to grab that User. And again, we're going to pass them through to the markOnline method. And we're just going to wrap this User in an array. And in addition, we have access to a leaving method. So when the User leaves the channel, we again get access to that User. And we're just going to go ahead and mark that User as offline. And again, we will wrap that in an array because that's what our method is expecting. Okay, so here we are back with two Users side by side. And you can already see that both myself and James are online in both browsers. What happens if I disconnect one of these Users, we're just going to go here and close the tab. And you can see here that on the left hand side of the page, James is now offline. If I jump back in and log James back in,

And you can see here that on the left hand side of the page, James is now offline. If I jump back in and log James back in, you can immediately see that he is back online. So again, with these features available to us with Laravel, Echo and Reverb, we're able to build really, really engaging real time user interfaces with ease.