One Million Checkboxes with Laravel
This episode is for members only

Sign up to access "One Million Checkboxes with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
06. Client-to-client whispering

Episodes

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

Transcript

00:00
We've got everything we need now to set the state of our checkboxes.
00:03
Let's go ahead and set up real-time communication here and whisper on the client side when an item is checked. So let's go ahead and get rid of this button that we implemented before. We'll keep the set item state method because that's going to be really useful. Let's set up real-time communication within Laravel. So the first thing that we're going to do is go ahead and run phpArtisan install
00:26
broadcasting. This is going to install the broadcasting functionality of Laravel and we're going to use Laravel reverb as our server. So let's say yes to that. Once this is finished, let's go ahead and install and build the no dependencies required for broadcasting. And then we're pretty much done. All of the reverb config we can leave as it is because we're just working
00:45
on a local machine and we need to go ahead and start our server. So let's go and use reverb start. We can also use the debug option to debug anything that's coming through while we're building this and that's pretty much it. We can now start to whisper from client to client. Now we're going to need a channel for this and there's one issue that we've got here and it's a very big
01:06
issue. When we send client to client communication with WebSockets with the pusher driver which we're going to be using with Laravel reverb, this requires that we be authenticated. Now we are not authenticated within this application. We don't want to be authenticated. So we need to figure out a way how we can whisper between clients and almost fake being authenticated.
01:31
So let's go over to our channels first of all. So that will be a newly created routes file in here and let's swap this out for the channel that we want to use. Let's just call this check boxes. That's our channel name. Now in here we are going to get a user instance in but we're going to need to fake this user and we're just going to return true here to say that we're
01:53
always allowed to broadcast and access this channel. Now if you are new to real-time communication within Laravel you will have an echo.js file which allows us to connect to our WebSocket server which we're already running and pick up any of the events that we send. We do have a course on that if you want to go ahead and check that out as well. Okay so let's go over to our scroller again and we're
02:16
going to go ahead and connect here to this channel that we've just created. So really simply we're just going to do this all in here on the starting of this component and we're going to use echo which is available on our global window object and we're going to say private check boxes. We're connecting to a private channel that we can whisper on. If we head over to the browser, open up our
02:37
console or our network tab and just check this out you will see that we should get, if we just head over to fetch xhr, a failed authentication request. Obviously because we're not authenticated as a user inside of our application. Now what we're going to do is once again something a little bit hacky. We are going to go over to our web routes in our project and we're going to fake
02:59
authenticating a user in here. Now we wouldn't normally do this but in our case we just want an anonymous user to be logged in so we can whisper between clients. We don't care about what this does we just want to be authenticated. So we can actually do this very easily within Laravel. We can go ahead and use the auth facade. We can log a user in and we can just new up a user model and
03:24
that's it. We are authenticated with an in-memory user which hasn't been persisted in the database so this will not go into the database and that's it. So let's go back over to the browser and give this a refresh. Just make sure we pull in the user model and there we go. We are now successfully authenticated on this checkboxes channel. So now that we've done that we can whisper between all of
03:49
these users who are now fatally logged in. So let's go ahead and open up our console and look at whispering between clients. I've gone ahead and opened up another browser window here in incognito so we're now technically working with two users. The goal is that when we check it over here we get something logged out in the console to say that we've checked this box and then of course we can
04:11
update our state using that function that we created in the last episode. Okay let's get started then. Back over to our scroller let's go ahead and send this whisper event. So I think it would be a good idea to create out a kind of toggle function in here which took the id of each of the checkboxes and whether it's checked or not and we can invoke this from when our checkbox itself actually changes.
04:36
So let's console log out id and checked and let's go down and hook this up into our checkbox. So we just want to say v on change so when this checkbox value changes we want to toggle this. Remember we get the item in scope inside of each of these that are rendered out and we want to pass over the id. Grabbing the event the javascript event for this will go to the target which is the checkbox itself
05:01
and we'll grab out the checked value which of course will be true or false. So now that we've done that let's go and just check one of these checkboxes and see what happens. So let's check this and there we go one and true so we've checked one two and true you get the idea it's going to go ahead and fire that off. So now what we can do inside of toggle is use set item state for our
05:23
purposes because when we whisper on a channel it's going to do that to all other connected clients but not us so we can set the item state if we want to. We don't necessarily need to do that but we'd like to keep our state up to date as much as possible. So let's go ahead and set this to checked and up here we want to go ahead and whisper. So whispering is just client to client
05:45
communication what we're not going to do is use something like a fetch request to send this down to some sort of end point to then fire an event off to go through to everyone else otherwise it's going to get incredibly slow we're going to have a huge amount of network requests and a lot of processing on the back end as well. So to whisper on a channel we reference the channel that we
06:06
created up here and we just want to say whisper and then we're going to give this event a name let's call that state. So in here we're going to provide an object of all of the items that we want to broadcast we just want to output the id and the checked state like this and then we can pick up this from all other clients and then use set item state to set that. Now there's a much easier
06:32
way to do this in javascript we just provide id and checked and this will imply that both of these properties have this name. Okay so now that we've done that we should be whispering on this channel we can bring up our console with reverb to check this out let's go over and just try this so i'm going to click on one of these from over here and there we go so you can see that we get this state
06:52
event prefix with client we have checked checkbox one and obviously that is set to true and it gives us the channel as well. So now what we can do on all other clients is listen for this event and then call set item state to update this let's do that now so we could just do this up here it doesn't really matter where we do it we're going to listen for a whisper and we are listening for the state
07:18
event and then when this event rolls in let's grab the event out here we want to set the item state with the id which has been passed over with this event and the checked status which is passed over with this event as well so if we go over now this should now when we click on here update the state for all clients now this seems really cool but of course we're not done yet when i check this
07:44
and i refresh the page obviously all of our state is lost we want to store this state in the back end whenever we receive any whisper from the client that's harder than it sounds but we're going to of course cover that but at least for now we know that this is being updated on the client for all clients

Episode summary

In this episode, we're diving into setting up real-time client-to-client communication ("whispering") for our checkbox app in Laravel. We start by ditching the old button-based communication and get Laravel's broadcasting up and running using Laravel Reverb. You'll see how to install and configure everything needed for real-time updates on your local machine.

The biggest challenge is that whispering over WebSockets in Laravel normally requires authenticated users, but our app isn't using a real auth system. We'll work around this by "faking" user authentication: creating an in-memory user so all our clients can join the private checkboxes channel for whisper communication. You'll see step-by-step how to do this safely and just for local dev.

Once we're all set up, we wire up the front end to listen for checkbox changes. When a user toggles a checkbox, we immediately whisper that update to all other clients, so everyone sees changes happen in real time — without any page reloads! We'll also cover how to listen for these events on the other clients and update their state accordingly.

By the end, you'll have checkboxes that sync instantly between browsers (including incognito tabs 😉). However, you'll notice that our changes aren't persistent yet — if you refresh, the state is lost. In the next episode, we'll tackle storing this state on the backend. But now, you've got live, snappy cross-client updates working!

Episode discussion

No comments, yet. Be the first!