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
09. Toggling bits in Redis with Laravel

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 already toggled some bits directly from the Redis command line interface. Let's do this now directly in our code. So this is where we want to do this.
00:08
Whenever we get a state update, we want to take the data that we get through here, which we've already seen logged out, and we want to put that into Redis. And then a little bit later, we're going to get all of this state back and we can pass that as our initial state to the client.
00:23
Okay. So let's go over to app. I'm not going to bother organizing this. So I'm just going to create out a class inside of the main directory called
00:31
check boxes, and this is just going to help to keep things a little bit more tidy. So inside of this class, we want a way to set at a particular index. So this is going to be an integer index with a Boolean, whether it's been checked or not.
00:47
So again, a zero or one value, and we want to put that directly into Redis. So let's go back over to handle state update, and we'll go ahead and new up that check boxes class that we've just created. And let's go ahead and set, and we want to take the data from here, from the payload
01:04
data, and we've already seen that dumped out, so we know what to pass in. We want to pass in the ID and we want to pass in whether it's been checked or not. So let's say data and checked, and we can even cast this to an integer here, or we can do that directly within the class.
01:20
It doesn't really matter. So to set this within data, like we have just done on the command line, we're going to use the Redis facade within Laravel. This allows us to use any of the commands that we were running on the command line.
01:34
So for example, if we wanted to get something, we would use the get static method or set bit in our case, when we set this, and that would just provide any of the options that we've already seen. So in our case, we want to set this within our state key.
01:49
So that's the overall key. The index here is going to be that position. And then again, I'm going to cast this to an integer here with checked. So our Boolean ends up as a zero or a one value, because that's what we're storing.
02:03
And to be honest, that is pretty much it. That's all we need to do. Okay. So what we're going to do now is run this a couple of times on our client side,
02:12
check a few of these, and then we'll go over to our web routes or something like that, and just dump out the state from Redis, just to make sure this is getting hooked up properly. So, because we've made a change to our handler, we just need to cancel off our
02:26
reverb server, rerun this, and we'll go over and try this out. Okay. So I'm going to check box one, two, and three, and then let's go for a few more and just see what happens.
02:38
Okay. So we've checked these, the state of course is still not coming through, but this should now be set inside of Redis. Let's go back over to our web routes and we'll just die dump out in here.
02:48
And we'll use Redis again, and we'll just get that state. So let's say get, and we'll just capitalize that and we'll say state. So that should return to us that bit vector string that we saw before. Okay.
03:03
So we ended up getting this representation in a slightly different way. Let's go over and just get rid of this and let's try and do box 1 million just to see what happens or near enough to 1 million, because we're not working with a responsive interface at the moment.
03:19
So let's just check a couple of these and then we'll go back over and rerun this and there we go. So now we're getting, although it doesn't look like what we saw within Redis when we did this on the command line, we're at least getting this data back now.
03:32
Now our next job is to take this data and transform it into something that we can actually use within a bit vector or a bit array on the client side. So effectively we want to end up with something like this. If box 1 is checked, we want 1.
03:48
If box 2, 3, 4, and 5 aren't checked, we want zeros. And we basically want to end up with this binary representation of what is checked and what isn't within a really compact string. So now that we are getting that data into Redis, let's go ahead
04:06
and fetch that data back out. Just before we do that, I'm going to come over and check a few more of these boxes. And then by the next episode, when we get this state and show it all of these check boxes, when we refresh the page, we'll have their initial state.
16 episodes•1 hr 17 mins

Overview

How do you render one million checkboxes in a browser and keep them synced in realtime?

Well, using a combination of virtual scroll rendering, Redis bitmaps and bi-directional WebSocket communication.

Let’s cover each of these concepts to build up this fun project — you’ll be surprised at how useful these techniques are for your own applications.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!