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
10. Getting checkbox state from Redis

Episodes

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

Transcript

00:00
OK, let's head over to our home controller, and we're just going to dump out the result of getting
00:04
all of these bits, as we saw in the last episode. So let's go and just grab out our state in here. We will new up our checkboxes class, and maybe we'll call an all method, which grabs us
00:17
back all of our state, like that binary representation that we need. OK, we don't have this method, so let's go ahead and define out this all method.
00:28
And in here, we want to go ahead and grab all that state. So let's start out by just using Redis get and state, as we did before. And obviously, that's not the kind of data that we can use.
00:40
So over in home controller, we'll just die dump on our state. And let's go over and give that a refresh. OK, so we end up with exactly the same thing
00:49
that we did before. Let's go ahead and break this up and see what each of these individual pieces of data actually are. And then we'll start to convert them to binary,
01:00
so from decimal to binary. So in here, what we want to do is store the bitmap, which is going to eventually look like this. Then we want to return that bitmap at the end.
01:12
And we can just iterate over this and do some dying and dumping as we go. So we're going to do a for each loop over each of the broken up pieces of state
01:21
that we get back from Redis. So let's create that for each loop now. And we are going to use string split here to split these out. And we're going to pass in Redis get state.
01:32
And then each of these, we're going to call character or char. Let's go ahead and just die dump on the first one just to see what that looks like. So let's go over and give that a refresh.
01:42
And yeah, we get the first character in here. Let's just var dump on these just so we get all of them out and we can see what they all look like. So let's go over and give that a refresh, and there we go.
01:54
We know that we've checked the first box. The ones here are just empty, so we know we haven't checked these. And then we get an H here.
02:01
We need to figure out what we need to do with this kind of data. So the first thing that we're going to do is use the ORD function. Let's go ahead and see what that looks
02:10
like when we give that a refresh. We end up with a decimal representation of that byte string that we just passed in. Now, from this, what we can do is go ahead and convert
02:23
decimal to binary, because remember, we need them binary values to be able to work out whether it's checked or not checked. So let's use the decimal to binary function on that decimal,
02:36
and let's go over and give this a refresh. OK, so now what's happened is we've got this weird representation of each of these. Some of them are just 0, because obviously they're just not
02:47
checked at all, or none in that specific group are checked. But with this, we want to go ahead and pad this out so they're all equal, and then we can go ahead and put them into one string.
02:57
So we're going to use the string pad function, and we're going to make this eight characters long for that representation. And we're going to pad this out with zeros
03:07
if it is not in there. And we'll use the string pad left option in here. OK, let's go over and have a look. And now you can see that these zeros have
03:17
been changed into these eights. And now effectively, if we just put all of these values together, this is going to be from the first checkbox all the way up to the last one down here,
03:30
which is going to be 1 million. So we didn't quite check 1 million, but remember, we checked one near 1 million. It was just hanging out of the page.
03:38
So you can see that that's represented as being checked. And we've got a few in here that have been checked and haven't. So let's go ahead and just take this, put this into that bitmap.
03:49
So let's just use a concatenation on each of these. And then we return that bitmap. So when we give that a refresh now, this is our entire representation
03:59
of each of the checkboxes that have been checked and haven't been checked all the way down to that one near 1 million. So I'm going to go ahead and get rid of our state here.
04:08
And now we effectively want to pass this state down and set the initial state. So let's just start to pass some data down here. So I'm going to set our state to just our checkboxes,
04:21
and then let's go ahead and pass this data in. So let's go ahead and pass some state down to our home, which is just going to be all of our state for each of these.
04:31
And let's also pass a count of these as well, so we know how many there actually are. So we're just going to say state count. And then to implement this method,
04:39
it's really, really simple. So let's go ahead and create out a count method in here. And with this, we'll look at another command, which we haven't looked at already,
04:49
and that is just bit count. So that will give us how many we have in there on our state. So that should be 1 million if we've checked the 1 million checkbox,
05:00
and we'll be able to iterate through these. Okay, so now that we've got this data, we want to pass it through to our component and set this 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!