9.4 Web Workers

Hi, folks. In this lesson we're going to take a look at web workers. Web workers are a way to execute code in a different thread than the main UI thread. The idea is that if we want to do some heavy processing we can offload this to a different thread than the main UI thread to avoid blocking the user interface. When we create a new web worker, we specifile the file that contains the code for the web worker. Before we create one, let's add a new file that can be used as the worker. We can call it worker.js. So back in the main script now, let's create a worker and point it to this new file. So we create a new worker using the worker constructor. The constructor takes an argument, and that is the path to the file that we want to use as the worker. In this case, it's worker.js. In order to communicate with the worker we need to send it a message. And we do that using the postMessage interface. In this case we send a simple string message that just says hello from the main script. Inside the worker then, we need to add a message handler that will be executed whenever the worker receives a message from the main script. Inside a file opened as a web worker the onmessage property is globally available for us to assign a function to. This function will act as a handler and will be invoked whenever a message object is received. It will pass an event object to our handler and we can access any data sent from the main script using the data property of this event objects. We can also send messages back to the main script from the web worker. PostMessage is a globally available function inside files opened as workers. It works in the same way as the postMessage function that we used in the main script does. And again, we can just pass back a simple string message. So back in the main script now, we can also add message handlers to the worker objects in the main script. And we can access any data sent from the worker back to the main script in the same way. So we can see both of the log messages from the main script and the worker script. Once we finished with the web worker, we need to terminate it. We can do that with the terminate method. We need to use setTimeout because if we terminate the worker immediately none of the messages will get sent. The terminate method doesn't take any arguments and it immediately terminates the worker script so the worker will no longer be available to receive or send messages. This type of worker is a dedicated web worker. There are also shared workers which can be used by multiple separate pages at the same time. We aren't going to look at these in this lesson. So in this lesson we looked at web workers, which are a way for us to spawn new threads that are separate from the main UI thread. We saw that we can send data between the main script and the worker using postMessage and onMessage event handlers. This now brings us to the end of the practical side of the course. There are just a few closing words from me in the concluding lesson. Thanks for watching.