Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, part of his series of titles on HTML5 and CSS3, author and expert Andy Olsen looks at advanced topics like geolocation, mobile development, web sockets, Web SQL, and web workers. You'll also learn how to communicate between pages downloaded from different servers and how to use the new Ajax features in XMLHttpRequest Level 2. After completing this workshop, developers be well equipped to start utilizing the powerful features of HTML5.
Sometimes, when you're using web workers, you might want to pass a complex object from the main page into the worker in order to tell it what to do. And likewise, the web worker might want to pass back a complex object as the result. So, we're going to see how to do that in this lesson. The webpage is called Object echo.html and there were three bits of information that we want to pass in to the worker. There's an integer that indicates how many replies we want to get back, from the worker, so I'll type in a number such as 5. We can also specify the gap that we'd like to have between replies. So something like 2000 milliseconds, and when I click start worker, it posts a message to the worker.
And the message is an object, and the object contains three properties. The first property is a string such as this, hi from worker 1. The second property is an integer called num replies, and the third part is an integer called gap. So what I do, and we'll see the code for this in a moment. I create an object containing those three properties and I pass that object as the parameter into the post message function. Likewise, the response that comes back from the web worker is also an object.
It contains a message, which is the original message converted to uppercase. An integer to tell me which reply this is, and an integer to tell me how many there are going to be altogether. So we'll see how you can pass objects into a web worker and back to the web page as part of the communication process. So lets have a look at the code. Code for this example is in two files theres a file called object echo.html and the background worker is in a java script file called object echo worker.js. I've copied both of these files into IIS Inetpub www root folder. So it doesn't even matter what web server you're using. But make sure that you copy the files from the project folder into your web server folder to run this example.
Okay so lets have a look at the html page first of all. And I just want to skim down to the bottom to show what the actual content of the page looks like. So there's a text box were the user can say how many replies they'd like to have. So that's a text box called num replies. And there's a second text box where you can say what the gap you'd like to have between the replies. So the gap may be something like 2000. And then the two buttons which allow the user to start and to cancel workers.
Plus, finally, a text area where it displays the results that come back. So, that's what the web page looks like. And this is the initialization code that runs when page first loads, so we just simply set up handlers with two buttons. And set up in local variables just makes it easier for me to access the text boxes and text areas in my script. So lets take a look at the top of the script now, top of the page. So here on line 22, I've set up some global verbals, and then on line 29, this is a funciton that'll be called when I click the start button. So most of this is fairly routine.
The object can be as complicated or as simple as you want. So in this case the object has three properties message, num replies and gap. The message is a string such as this hi from worker 1. And the num reply is but have a value you entered into the first text box like 5. And then gap is whatever value I entered into the second text box like 2000. So this object will be paused in to the background worker.
Now we need to see how to process that data in the background worker. So lets take a look at objectechooworker.js and if I just scroll down to the bottom of the file. We can see here at the bottom, it handles the incoming message in the main page. And the message handler is here. The message handler shows how you can extract parts of an object from the incoming message. You say e.data, as usual, and then you drill into the part of the object that you want. So that would be the message, such as hi from worker 1.
And we convert it to uppercase and we store it in the global variable here, so we can refer to it later. I've set up some global verbs at the top of the file here. I also we get the num replies field from the incoming data. So that'll be 5. And we store that in the global variable and the gap as well. We store that in the global variable as well. So we've captured the data and stored it locally and then here it sets up an interval. The interval will call this function several times.
So the dual reply function is going to be called repeatedly. And a gap of, for example 2,000 milliseconds. So let's have a look at the dual reply function. Each time that function is called, it'll post a message back to the main page. And the message itself, would be an object. So, we call post message, and we pass back an object to the main page. And the object also has a message property. So that would be hi from worker 1, and uppercase remember, according to what we set up down here. And then we reply number, so this would indicate reply one, reply two, reply three.
I've got a counter here that keeps track of how many replies we've sent back. And then the total number of replies is something like five, okay. So this object will contain all the information that we want to post back to the main page. And then just when we finish, just to be on the safe side, online sending to 90. After we've sent back the appropriate number of replies, like five, we need to cancel the interval so that it doesn't keep on going. So, call a key internal function to stop it from repeating the process any further.
Okay, one last thing to think about then. What happens when we post an object back to the main page. Let's see how that's handled in object echo.html. So that'll be in the on message function. The on message function will handle the data posted back from the background worker. And as you can see here, it uses a similar approach, e.data is the object passed back from the worker. And it have a message property and a reply number property, and a total replies property like so.
So we've seen how you can create an example which uses web worker passing complex objects potentially between the main page and the worker itself. In order to communicate rich data between the two parties.
There are currently no FAQs about HTML5 Power Workshop.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.