Start learning with our library of video tutorials taught by experts. Get started

HTML5 Power Workshop
Illustration by

Passing object messages


From:

HTML5 Power Workshop

with Andy Olsen

Video: Passing object messages

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
HTML5 Power Workshop
3h 9m Intermediate May 31, 2012

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.

Topics include:
  • Using the Communications API
  • Understanding geolocation
  • Getting and watching the current position
  • Using web workers and WebSockets
  • Implementing mobile web user interfaces
  • Managing data in a mobile web application
  • Working offline
  • Using Web SQL
  • Using drag-and-drop
Subjects:
Developer Web Web Design Web Development video2brain
Software:
HTML
Author:
Andy Olsen

Passing object messages

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.

We check whether the broswer supports web workers, and if it does support web workers, we create a new web worker, and we tell it which Javascript file to run. And we handle the message event and the error event as you would normally. I store each worker in an array so that I can cancel them one by one if I want to after I've started them. The most important part is on lines 50 to 53. This shows how you can pass an object into a worker. You call the post message function and as you can see here I've passed in an object.

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 Power Workshop.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.