Receiving Data from a Worker

[00:00:00]
>> Kyle Simpson: Let's try to get our Fibonacci thing to actually do something useful. Let's go to our worker, and let's say that when we receive the onMessage is when we wanna start up our Fibonacci generation. So it won't even really matter what the message is. But if we send a message, the worker won't start automatically.

[00:00:23]
But once we send a message it'll say okay, I know that that means you want me to start up. So I'm gonna have another function that I'll call getNextFibonacci and,
>> Kyle Simpson: This variable here is gonna be updated as we ask for Fibonacci, so we're gonna say,
>> Kyle Simpson: I don't know what to call this yet, but I'll call it fibIdx that's gonna tell us that we need to do the next one of those and then update it.

[00:01:11]
And then we're gonna call, so we'll say,
>> Kyle Simpson: I'll probably rename these variables in just a moment as we sketch this out, but we're gonna do currFib.
>> Kyle Simpson: So this is a statement that's gonna be a long running thing potentially. Once we get into those bigger numbers, this line 14 is gonna spin off this recursive thing.

[00:01:36]
And it's gonna be running for seconds and seconds at a time. But once we get that back, we want to then post a message to the page with the information of what we've just done. So we wanna basically say, actually so let's use fibIdx here. We want to send to the page, so we're gonna do self.postMessage.

[00:01:59]
And here I'm gonna send two pieces of data, so I'll use an object, and I wanna say,
>> Kyle Simpson: The number is gonna be fibNum.
>> Kyle Simpson: And then we'll call it, I guess, idx is fibIdx.
>> Kyle Simpson: So we wanna send that message to the webpage. And we'll receive that message and render it.

[00:02:31]
But after we've generated one, then we want to start generating the next one. So we wanna say getNextFib, and we want to,
>> Kyle Simpson: Update with fibIdx + 1.
>> Kyle Simpson: So we could do this a couple of ways, we could use this fibIdx, or we could just use curFib.

[00:03:01]
So I think that's what we'll do, we'll skip the fibIdx, and we'll just use curFib here.
>> Kyle Simpson: Once we have done that, we will update curFib to the next number, and then we'll call getNextFib again.
>> Kyle Simpson: So the way we spin this off is that when we receive a message, we'll call, I guess we gotta do that here.

[00:03:33]
>> Kyle Simpson: We'll call,
>> Kyle Simpson: getNextFib().
>> Kyle Simpson: By the way, since this is calling it immediately, we're basically gonna be in a tight loop where nothing can interrupt it. If we wanted to yield to allow a message to come in, we could do a very simple sort of a yield back to the event loop by saying start it up on the next event loop.

[00:04:06]
So maybe we'll leave it like that for now. But we're not gonna take advantage of the ability to send in a message, so it probably doesn't matter. So let's just check to make sure this is gonna work. We're gonna say when we receive the first message, we call getNextFib, which starts calculating fib of zero.

[00:04:22]
Once it's done that, it sends 0 and the num off, and then it updates this and then it says hey, do it again. So that logic seems valid. Now back in the client webpage, we need to take this part out. And it's going to be right here in startFibs that we're gonna call worker.postMessage.

[00:04:48]
And it doesn't really matter what we send, but we've gotta send some thing. So I'm just gonna send an object that says start true. Since we're not looking at that object, it doesn't really matter. But that tells it hey, go ahead and start, and I'm listening for messages, so I'll start rendering those.

[00:05:03]
And then while we're at it, the stopFibs, the way we kill a worker is to say worker terminate.
>> Kyle Simpson: So all that should be left for us to do is to pull off messages from the worker and render them. Remember, event.data is gonna be this object that we send that's got idx and num in it.

[00:05:27]
So let's,
>> Kyle Simpson: I think I got the word num and fib backwards, but that's okay. We're going to call renderFib.
>> Kyle Simpson: And we're gonna be using event.data.idx and event.data dot, did I call it num? Yeah, I called it num, actually let's change that. In our worker, I'm going to change that back to fib so that's not so confusing.

[00:06:06]
>> Kyle Simpson: The property that we send back and the message will be fib. So we'll say event.data.fib, that should render that. And the render just adds this message of those two values to our page.
>> Speaker 1: Which variables did you change?
>> Kyle Simpson: I went over to my web worker and the property name, instead of calling it num, I call it fib.

[00:06:30]
Just cuz I didn't wanna confuse myself on the other screen.
>> Kyle Simpson: So here we have idx and fib are the two properties on that object that we're pulling. Okay, so we've cleared our console, let's restart the page. And when I call the Start button, we should start seeing Fibonacci numbers being generated.

[00:06:58]
And there we go, so as we get higher and higher, that web worker is taking longer. Notice that while it's generating those, I'm still able to do stuff on the page. Able to scroll around, highlight things, because my page is not being blocked. Even though all that work is happening in the background, my page is still running independently.

[00:07:19]
>> Kyle Simpson: We can go look at our console, we don't see any error messages there.
>> Kyle Simpson: Takes a little while to get to Fibonacci of 45. Last night I let it run long enough to get to 46, and I never saw it go past 46, it was taking much, much longer.

[00:07:39]
Because it exponentially grows when you do binary recursion like that. So if we click Stop, now the web worker has died and we won't ever receive any other messages. But if we click Start again, it'll start over from scratch. So it killed the worker and then restarted it.

[00:08:12]
>> Kyle Simpson: So what questions can we answer about, and don't forget to click Stop on yours or kill so that you're not killing your battery.