How to Handle the JavaScript Web Worker task?


Handling the JavaScript Web Worker

This is the continuation of Javascript Web Worker example with explanation article. In previous article, we implement the web worker in prime number searcher example. We experience the lag issue also. But in this article, we are going to handle the web worker task.

How to Handle the Javascript Web Worker task?
How to Handle the Javascript Web Worker task?

But firstly, have you enjoyed the previous article?

If yes, then please share the article and press the red heart icon at right hand side of article. Let’s dive into the article now.

Handle the worker errors

The postMessage() method is the key to communicating with web workers. However, there’s one more way that a web worker can notify your web page — with the onerror event that signals an error:

If any issues occurred due to anything or invalid data causes an error in your background code, the error details are packaged up and sent back to the page. Here’s some web page code that simply displays the text of the error message:

Along with the message property, the error object also includes a lineno and filename property, which report the line number and file name where the error occurred.

Cancel the background task

We created a simple web worker example. And, now we want to implement the canceling background process. It can be shut down the web worker while its running.

There are two ways to stop a worker. First, a worker can stop itself by calling close(). More commonly, the page that created the worker will shut it down by calling the worker’s terminate() method. For example, Here’s the code you can use to power a straightforward Cancel button:

Click this button to stop the current search and re-enable the search button. Just remember that once a worker is stopped in this way, you can’t send any more messages, and it can’t be used to do any more operations.

You can play with code below:

Return more complex message

Have you seen the progress information in percentage? Give me another 2 min to explain this functionality.

This is a more advanced trick, because you need to make the web worker keep talking to the web page. However, it’s a good skill to master, because you’ll use this sort of communication in more advanced web worker examples.

As you already learned, web workers have just one way to talk to the web page—with the postMessage() method. So to create this example, the web worker needs to send two types of messages: progress notifications (while the work is under way) and the prime number list (when the work is finished). The trick is making the difference between these two messages clear, so the onMessage event handler in the page can tell the difference between the two types of messages.

The best approach is to add a bit of extra information to the message. For example, when the web worker sends progress information, it can slap the text label “Progress” on its message. And when the web worker sends the prime number list, it can add the label “PrimeList.”

Here’s how you would rewrite the web worker code to add a message type to the prime number list:

The code in the findPrimes() function also uses the postMessage() method to send a message back to the web page. It uses the same two properties — messageType and data. But now the messageType indicates that the message is a progress notification, and data holds the progress percentage:

When the page receives a message, it needs to start by checking the messgeType property to determine what sort of message it has just received. If it’s a prime list, then the results are shown in the page. If it’s a progress notification, then the progress text is updated:

This kind of message passing can get complicated. But the extra work is worth it, because it keeps your code safe.

Let’s conclude now

Right now, the prime number search users web workers in the most straightforward way possible — to perform one well-defined task. Your pages don’t need to be this simple. Here are a few examples of how you can get more advanced:

  • Create multiple web workers. Your page doesn’t need to stick to one worker. For example, imagine you want to let a visitor launch several prime number searches at a time. You could create a new web worker for each search, and keep track of all your workers in an array.
  • Create web workers inside a web worker. A web worker can start its own web workers, send them messages, and receive their messages back. This technique is useful for complex computational tasks that require recursion, like calculating the Fibonacci sequence.
  • Do periodic tasks with a web worker. Web workers can use the  setTimeout() and setInterval() functions, just like ordinary web pages. For example, you might create a web worker that checks a website for new data every minute.

Web workers are one of the most significant ways that JavaScript has closed the gap between the browser world and the world of desktop applications. They’ve only been around for a few years, but they’re already indispensable for serious JavaScript work.

How to Handle the Javascript Web Worker task?
Article Name
How to Handle the Javascript Web Worker task?
This is the continuation of Javascript Web Worker example with explanation article. In previous article, we implement the web worker in prime number.
Publisher Name
Das JS
Publisher Logo