So if we come back to Chrome, that should compile behind the scenes, and yeah, now I want to include all Users who are currently present within this project. Let's come back to Sublime, and right down here. So before, we were loading a private channel, but now I'm going to join a presence channel. So this still extends your basic pusher channel, so your main API is still accessible there. But there's also three new methods that are available to you. One is called here. This is going to be triggered when the page loads, basically, and it will contain information about all Users who are currently here. And what I'm going to do is log these so that you can see instantly when the methods are

about all users who are currently here. And what I'm going to do is log these so that you can see instantly when the methods are triggered, just as an example. The next method is joining, so when a user has joined the group. And then we, of course, have a third one for leaving. When a user has left the group, this method or handler will fire. OK, let's give this a shot. But if I open up the console, yeah, I don't see anything here. And this can be a little tricky if you haven't read the documentation. Here's the issue.

And this can be a little tricky if you haven't read the documentation. Here's the issue. Within your routes/channels file, you'll remember this is where you authorize all of your pusher channels, or any channel, really. In this case, this works great for a private channel, but for a presence channel, you need to return information about the User who is present. So instead, I could say, well, if this User, the signed in User, is authorized to participate in the Project, I will return any information I need to about that User. So in this case, I'm returning their name. You could return their ID, their name, the email, all three, anything you want.

So in this case, I'm returning their name. You could return their ID, their name, the email, all three, anything you want. All right, that should do it. So we'll give it a refresh one more time. And now you can see the here method was triggered, and at the moment, I'm the only person present. Let's open up Firefox, though. I have a separate account, in this case for my wife that I've created. So if we go back to Chrome, she's now visible, or she has joined, and that is now reflected here. Let's have her leave.

here. Let's have her leave. Now the leaving method is triggered. So that means these three methods combined should be everything we need to make this work. Let's try it out. Right up here, we could say, we'll just keep it dumb and dirty, we'll say, within a list item, filter through all of the participants, and we'll call that participant. Now this will refer to the User record that was returned from the route authorization. You could call it users if you want.

Now this will refer to the User record that was returned from the route authorization. You could call it users if you want. It doesn't matter. Anyways, we'll grab their name. So we need to track that data now. We'll initialize it to an empty array, and then right down here, once we have a list of all users who are present, we will assign it. Okay, back to Chrome. We give it a refresh, and now once again, I see my name. I'm the only one.

We give it a refresh, and now once again, I see my name. I'm the only one. If we go back to Firefox, now my wife's account has joined, it's reflected there, and if we go back to Chrome, well, we haven't added the functionality to append to that list yet, so we'd have to give it a hard refresh to pull in those changes. Sounds like that's our next step. So we'll say right here, we're simply going to push the user, and then when a user leaves, we just want to splice them out. So you can do that pretty easily by saying splice, and then let's just figure out where the index of that currentUser object is within the array, and from that point, we will splice.

So we've introduced a bug. It's a small one, though. Think about it. Before we were using, I'm sorry, right here, before we were using a private channel, and then we switched to a presence channel. So think about an old TV where you turn the dial, right? In this case, we're saying turn the dial to the presence channel. That's what I want to listen on. However, on the server side, we are still broadcasting on a private channel. It's a completely different channel, so of course you're not going to pick up on it.