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.
This means we either used to write it in the body tag or in the head tag of the same file.
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.
So the solution to this problem is the web worker API.
So, we will go back to the slide
As written in the slide, how it works,
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
When we will perform the practical it will become more clear.
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
So, "this is example web worker",
Web worker dot html
Let's save it
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.
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, 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.
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.
As we saw in the storage, we have to check whether the storage exists or not.
So, we wrote "if type of"
Also in storage, the S was capital.
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.
This means we are writing about whether the worker exists here or not.
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.
"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.
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".
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.
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,
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
We haven't run the program
So, the name of the program is web worker..
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
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.
Thank you, guys.
Share a personalized message with your friends.