What are API Web Workers in HTML 5?

Hello guys,

You are welcome to our html series

In the last segment, we learned about the two types of web storage available to us.

There are two storage available through html such as local storage and session storage.

The data gets permanently stored in the internal memory with local storage, and we can retrieve and show the data from there whenever we want.

In the session storage when we run the program, the data is stored until the moment all the tabs are closed means the session is over.

So we learned these two things. I hope you tried and ran the things we learned in that session regarding the local and the session storage, and the two practicals we performed in that segment.

If you had any issues or difficulties while performing the practical, you can let us know at forum.learnvern.com, we will try to revert as soon as possible by resolving your issues.

In today's segment, we are going to learn about web worker API, the web worker API of HTML.

It doesn't click quick what web worker API is about, so I will first tell you that when we used to run the programs until now, we used to write the html elements, in the body tag inside the HTML portion and we used to write the javascript in the script.

This means we either used to write it in the body tag or in the head tag of the same file.

So when we run the javascript, it is dependent on the code.

Sometimes in a few scenarios the javascript loads fast, which means often the scenario occurs that we need to load the javascript before we perform the HTML or in some scenarios, we need to load the html first and then the javascript.

For example, in the programs, we saw last we had the program the local storage and the session storage.

So, we have written "result" before the body tag inside the p.

We have mentioned where we want to show the result first and we have written the javascript after that, which means first we have written the html element and after that the script element.

When we go to the session storage the similar thing is we write the script, first, the javascript is loaded and after that, we have written our HTML element.

Means we can see here in both the programs, in one we need to load the javascript first so we wrote the javascript first in the head tag, and in the second program we had to show up the result before the javascript means we have set it in the local storage that's why if we first write the result is fine.

In that case, we have written the javascript afterwards.

So here, we have to decide when we need to write the javascript based on the program.

If in any program we need the javascript first but mistakenly we define it later, in that case, the program doesn't run and issues are created.

So the solution to this problem is the web worker API.

Web worker API is a program in which we write the required JavaScript code in an external file and the code which we want to write in our program, only that code we write in the program.

For example, if I create a javascript file in which I define the web worker API then during the execution of the whole program the javascript keeps executing continuously I do not need to execute it before or after.

So in this case, in web worker APIs case we generate an external Javascript file in which we write the code which needs to be continuously executed in the external file and we write the Javascript which is only related to the web page in the program of the web page means we define it with HTML.

So, we will go back to the slide

As written in the slide, how it works,

Creating a web worker in external JavaScript means the example given here where we are creating a counter.

Post message is a function and I will tell you about it. We have put the function until this line "var i equal to zero", from declaring I until "time count" in an external Javascript file.

So, that will be the web worker API, web API means where we have defined this function.

After that we will create an object of this program, through this object we will use the data in the html file.

Here, a note is written on the slide

"Post method is used to send back the message to the html page", means if there is something written like from where the program or the web worker is being called in the javascript JS file which is defined externally and we want to pass a message from there, in that case, we use the post message function.

When we will perform the practical it will become more clear.

So here is the example, in this example both the html and JavaScript portion is going to be included.

Firstly we will write this program, so let's go to the sublime text.

Because we have to generate two files here, first we will take an html file and here, HTML

Okay

So, "this is example web worker",

Save

Web worker dot html

Let's save it

Now we need one more external file in which we will write the code of the web worker, which means the Javascript code.

For that, we will create a javascript file, and we will open a new tab or file here.

From here we will add Javascript because this program is of JavaScript.

In this program, we will define the web worker

So let's say, our variable was VAR I equal to zero, after that we have a function named timed out.

"Function timed out"

In this function we have to write, i equals to i plus 1,

We are returning the value of i in the html portion by increasing it..

For that, we took a function named "post message", as explained when we have to send the data from the web worker file to the HTML web worker file will be defined in the post message.

So currently, I am sending the value of i, so I will define it in the post message.

Now, I will define a time out also

Set time out, let's say I have to give a timeout of 500 milliseconds.

In that case, I want to call this function after every 500 milliseconds.

Okay

So the function comma 500

500 indicates that every 500th time my function will go into sleep mode, again after every 500 milliseconds means after every half second the function will execute.

Then I will call this function the very first time, which means this defines the timedout.

Means... This defines when we come to this API we have created the function named time out but when we have to call this function the very first time for that we are calling the function here, we have called the function means it is called here.

Then we are increasing the value of i. We will send the value of i to the web worker when we will call from here and after every 500 milliseconds means after every half second, we will keep calling this function continuously and the program will work in this way.

Now, I will store the javascript program of the web worker with the name demo worker dot js.

Okay

Now, we will click back to our program

So, what we basically have to do in the program is, we are going to create two buttons,

One is the start worker and one is the stop worker, when we will click on the start worker the function will start being called means the count will start increasing.

When we will click on stop worker the worker which is defined in the external file will stop increasing, which means we are taking two buttons named start worker and stop worker.

We will "start worker" from one we will start and from one we will stop and we will call the timer stored on the external file to the current html file and fetch and show its value.

So as I said, we have to show one counter and we need two buttons.

Let's say I take the p tag to show the counter, I will write "count numbers" in the p tag and here I need to show an output that is the output of the counter,

For that, I am using the output tag and I will give it an id " result".

Here we have used "output" to print the count number because we have already used "p" and when we have to perform a mathematical calculation and show it, in that case, we use output and also span in the place of output, both will work the same here.

So that was the output.

After that, we will need two buttons one for the start worker and one for the stop worker.

So the button, the first name will be start worker...I will call the start worker method on "onclick".

I will take the second button and its name will be.. stop worker.

We will create a method of stop worker.

So, we have defined two functions here, start worker will execute by clicking the start worker button and by clicking stop worker, stop worker will execute.

So these are our buttons.

Here, our HTML portion is ending, now we will define the script here, which means the Javascript.

As explained earlier, we write the program in the external JS file which needs to be working throughout the execution of the program worker file.

We want that no matter whether we click the button or not the execution of this program must go on, that is why we have written it in the external file which we named as "demo worker".

Now, we will access the data of the file from here but through the API of the web worker.

For API,

As we saw in the storage, we have to check whether the storage exists or not.

So, we wrote "if type of"

We wrote storage, this time we have to check the worker so it's worker, make sure the W of the "worker" is capital because it is a class and when we define a class in JavaScript the first character is always capital.

Also in storage, the S was capital.

Now we will learn about the class, object and function in detail in the javascript course.

Currently, we will only make sure that we are only checking if the worker exists or not, in that case, we will only check the type of worker, which means the worker is undefined or not.

So,

Okay

This means we are writing about whether the worker exists here or not.

If

Now if there's if-else will also be mentioned, which means if the browser doesn't support what we will write in that case.

Else

"Document dot get element by Id"

I'd is "result"

"Dot inner html, your browser..... doesn't support ...web worker"

This indicates that if the worker is undefined and not executing means our browser doesn't support the web worker API.

So we have written that in else statement.

Now, if the "if Statement" gets true and the browser supports web worker, in that case, we will first write that the type of worker is not undefined after that we will define a variable, "var W" we took W because we have to pass the object- worker inside it.

.

So, after defining W, we will check whether W exist or not,

So "if type of W is not equal to.. undefined"

This means if W also exists then we will move further in this program.

Now, we will define this W as an object of the web worker file.

How we create objects, not only in JavaScript but usually in all object-oriented programming languages is:

W equal to new,

Worker comes after new, worker means our class name.

So the current class is worker and inside it, we will pass the name of the file "demo worker dot JS".

Okay

Let me explain this line

First, we created a variable which we named W,

We want to make the Variable W an object now, object of which file?

The object of the file which we have created externally.

Because this is a web worker we are creating the object in the worker and the object of the worker.

So W equal to a new worker

New is the keyword to define that we are going to create a new object.

So, W is equal to new

And then the class name means "worker"

And after the worker, the program that we have created.

So let's say the current program is the demo worker and I want to create an object for it that is why I will write demo worker dot js here.

If I have created any other program or I define any other worker.

Let's say I generate a third program here in which I will write external JavaScript then I will write that program's name here, or pass that file's name here.

Currently, the name of my file is demo worker and I have to create an object for that

So the syntax will be: "W equal to new worker demo worker dot js".

So once I have created the object, after creating the object I have to run a function on this.

Now, what will be that function?

So as you must have seen here, we passed out a message from this file to the html file through the post message method.

So we also have to get the message which is being passed from here in this file, how can we do it?

So that will be done with this W,

W dot on message, this is our receiving function.

So we can get the message which is transferred through post message through W dot on message because we created an object and named it W that is why W will be written here.

"W dot on message"

Now I am creating a function here

"Function event" means I want to show the answer I will get, in the result.

So,.. document dot get element by Id

The value which I have got in the result

Inner html equal to event dot data.

What will happen through this is, the value passed through

the post message and get through the w dot on message and the function which we have created related to that

In that function where we have to show the value as a result, we are showing that value there using the parameter event.

And event data related to the event.

If I write E here, it will be e dot data here.

So, when a message is being provided I am getting it through w dot on message

I have given the parameter E, the event that is firing

And I am showing the message through the data of the event.

So that was the method to show the message.

The complete task that we have done, starting from VAR to here is to be performed when we click the start worker.

So, I will place this portion and place it in the function named start worker.

This means, the portion starting from object creation, checking for the object, checking for the worker, assigning the values and creating the object till showing the result will be executed when I will click on the start worker.

So that was the start worker.

Here my lines appear to be uneven so I will reindent the line by selecting from edit so that the portion becomes properly indented.

So that was the function of the start worker, now I have to create the function for the stop worker which is here.

Stop worker means, I have to stop the worker which is running.

So for stopping that I will take the variable out of this,

Okay

Taking the variable out of this is important because I have to use this variable in the stop worker function.

If I define this variable inside the start worker then the scope of this variable can only be utilized for the start worker method.

So now I have to use the same variable and same object for the stop worker.

So w dot terminate method is the method of web worker API,

By terminate, the execution which is running for the object will stop,

Even though the web worker continues working but the object will stop and after that, we will also undefine W

So W equal to undefined

What will happen by passing undefine value to W?

Here we checked the type of w equals to not of undefined, which means create the object of W if the value is not undefined, the program runs and we have to show up the value.

So, If I give the undefine value here, this portion will not run

This means, ultimately the function or the W will stop

I am terminating W through the stop worker function and undefining its value also.

By undefining the value this condition will get false.

So these were the two methods, start worker and stop worker

Now, I will save this program and go to chrome where I ran the program

Okay.

We haven't run the program

So, the name of the program is web worker..

Okay

Open with Google Chrome

Here we are getting it

So here it is the count number

Start worker and stop worker

We will zoom in a bit

Okay

On click

When I am running this program, I am not getting the output on clicking start worker.

When we have errors in the program and the program is not running we have to press the F12 key on the keyboard or we can click developer tools by going to settings and more settings.

We get the error why the program is not running when we check the console by going into the developer tools, and the error is shown in the console.

Here as you can see

"Failed to construct worker" and after that the name of the JS file.

This is a common error when we work with the worker, when the worker doesn't work on the browser like chrome, edge, Mozilla, firefox etc, to enable that we need localhost.

A local host means a server currently runs continuously in the system or the browser and keeps serving the program.

For this, we need to install a local host in the computer or the current system.

So let's say there is one localhost server named custom server, for that we will search "web server...for chrome"

So we are getting a web server for chrome in the extensions you can also see the icon.

So you can add this extension to your system, in my system is already added.

So you just click on the button to add it so that it can be added to the system.

After that when you will add it, click on launch app, then you will see a pop-up here

In this pop up/folder you need to select the path or the file in which the program is stored.

When you select that path here, then this web server starts hosting that folder.

So let's say I go to the choose folder, my programs are stored on the html path so I will select html from the desktop.

Select folder, so the moment I select here I get a web server URL here, so just copy this URL or click on it.

The moment you click on it the localhost path is opening in the new tab as soon as we open it.

So earlier, the program which ran and the errors occurred, the file path is shown

But when I am running it with the localhost server, in that case, I get the IP address of the server which means my program is running through the localhost.

So when it runs through the localhost, you have to check your program.

The name of my program was web worker dot html, so I will click it here and I will get the same program.

Errors are occurring in this program and it is not running properly, you can see the errors here.

Now, I am running the same program through the localhost, the moment I click start worker here the counter starts increasing like 1 2 3 4 5 6, after every half second the counter is running.

So if I stop this the counter will also stop and will come in pause mode.

Again I am starting the Worker, the counter is initializing from 1 and increasing further.

So earlier, when I run the program without a web server it will not run properly.

These are the limitations of the web worker, that we need localhost to run the web worker.

Soon as we run the program by installing the localhost the program starts running successfully.

So that was the web worker and the way we can work with it.

This is the program

We need to generate an external file for the web worker, the JS file inside which the web worker has one main html file in which we have shown the result of the program and created two functions for start and stop worker.

So here are two functions

And the message we accepted through the web worker comes through "on message" and we have shown the result in that.

So this is the web worker and the way we can work with the web worker.

So today we learned about the web worker API.

After this, all the APIs of HTML are completed.

So guys I request,

The program of the web worker is a bit difficult

You should try it yourself and run it in your system.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

Till then

Thank you, guys.