Creating a Worker

[00:00:00]
>> Kyle Simpson: Let's go ahead and switch over to our browser, I'm sorry, to our code editor. And you'll notice that in that directory where we're doing the web worker exercise, there's a web directory and inside it a JS directory. And inside of that two JavaScript files, one is called home.js, the other one's called worker.js.

[00:00:21]
Home.js is the code that is loaded up on that particular web page that we were just looking at. It's the one that's gonna handle the button clicks and all that. Worker.js is the thing that we're gonna spin up in another worker. So let's just explore this code, make sure we understand what's happening here.

[00:00:38]
I've got references to my button and also my Fibonacci numbers list. And then I've got an event handler on my start stop button, that when I click it the first time, it's going to start asking for Fibonacci numbers. So here at this to do comment, that's where we're gonna spin up our worker and ask it to start doing it's computation.

[00:01:06]
And then it switches it from a start to a stop button. And when we click stop, that's down here on this to do comment, that's where we're gonna wanna terminate the worker. And then it'll flip back to a start button so we can start it over and over again.

[00:01:19]
But we don't want it to just sit there and run and kill our battery [LAUGH]. A quick note on this, when you're developing on these things, it's very easy to leave that stuff running in the background, and all of a sudden your battery's dead. So make sure you actually kill these things and don't let them just run.

[00:01:34]
If you're like me, you'll hear your fan spin up before too long [LAUGH]. So all right, let's talk about how we're gonna make a worker. First thing we wanna do, is since we're gonna need to access it across several different functions and asynchronously, we're gonna go ahead and make a worker variable to assign to.

[00:01:52]
So line six, make a worker variable.
>> Kyle Simpson: And then in our startFibs function, this is where we're going to instantiate our worker. So we're gonna say, worker = new Worker. By the way, web workers have been in browsers for five to seven-ish years, somewhere in that range. Almost all browsers you're gonna be supporting are gonna have it.

[00:02:23]
But if you really are concerned, you should probably do some feature detection and have a fallback if there isn't gonna be a web worker involved. You can check to see whether or not worker is defined in the global space and use it that way, use the type of operator, for example.

[00:02:38]
But we'll just assume for our purposes that we're definitely working in browsers that have web workers. Certainly if you have service worker support, you're gonna have web worker support. So the way that this worker constructor works is that we need to give it a URL for a JavaScript file that we want it to load in a separate thread.

[00:02:57]
So that's gonna be /js/worker.js.
>> Kyle Simpson: And that is actually all that is technically required to spin off a web worker. Now, we don't have any eventing between the two, so spinning off a web worker that just kind of runs in the background wouldn't necessarily be able to do a lot of useful stuff.

[00:03:20]
However, it is possible that this might be all you literally need to do. Because the web worker does have, while it doesn't have access to things like your DOM and stuff like that, the web worker does have network access. So a web worker could technically be making ping communications to your server, or sending information that it gathered.

[00:03:42]
So it's not gonna be able to pull stuff from your web page, but it might be able to pull stuff from other locations, or just say hey, I'm still alive, or something like that. So we've spun up a worker, we want to actually talk to it, so we need two pieces.

[00:03:59]
We need to be able to listen to messages that come from it, and then we need to be able to send messages to it. So we are going to say worker.addEventListener, and we're gonna listen for the message event. And we're gonna define a function called onMessage that we wanna listen for.

[00:04:25]
>> Kyle Simpson: So let's define our onMessage function. We're gonna get an event, just like most event handlers that you've written, we're gonna get an event that we want to,
>> Kyle Simpson: Process the event. So the event object that comes in, it may have some properties that you're interested in, and we'll talk about those in a little bit.

[00:04:49]
But specifically the one that we're gonna be interested in right now is the data property, which is the actual message that was sent along, so event.data. So we're gonna just basically console.log(evt.data), so we can see if our web worker sends us a message.
>> Kyle Simpson: In our worker, which I've already written the bad implementation, recursive implementation of Fibonacci, you notice we're not actually spinning it up yet.

[00:05:26]
So the first thing that we might wanna do, when we've spun up a web worker, is we might want to send a message back to the main page. So the way we do that is to say self.postMessage. And then we're gonna pass it some information, for example, a string or an object.

[00:05:45]
So I'm just gonna say, hello from the web worker. Armed with those changes to our JavaScript files, let's come over to our web page. And I already have my developer tools open, so I will have to switch between these two so we can see what happens. But I'm gonna reload this page and I'm going to click the start button.

[00:06:10]
And then we'll look at the console and see if we in fact got what we were looking for. No errors, so that's a good sign, then we click the start button, and now we see in the console, hello from the web worker.
>> Kyle Simpson: That's a good sign, we have a web worker that ran.

[00:06:35]
Now because it's not doing anything, it's literally just gonna sit there idle. But when we have it doing stuff it can stay alive and keep doing things.