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.
In this lesson, we're going to look at various communication mechanisms and other techniques that are useful when you are using Web Workers in a real situation. So, I just run this sample application first and as I am going through it I will describe various patterns that we are using. So, the Web page is called Primenumberapp.html and I've copied it into my Web Publishing folder. And the idea of the example is you can get the Background Worker to tell you all the prime numbers in a certain range. So, in the first text box, I can type a lower number, such as 100, and then an upper number, well, let's give it a big number, 80,000.
So, it's going to take a while to take all those prime numbers. Well let's click Find Primes, when its found all the prime numbers in that range. It'll send me back a result message and the result message will indicate while the start time and the end time of the Background Worker. And it'll also indicate obviously all the prime numbers that its found during that time. So, that's the result message, if you like. Another message that might be useful to send back from the Background Worker might be an error message if something goes wrong.
In my example here, I've coded it so that if the upper number is actually less than the lower number, then effectively, it'll throw back another message to say Error. So if I click Find Primes again. You can see here, I've retrieved a different kind of message back this time. To say there's an error. The lower number is higher than the upper number. That shouldn't be the case. So, that's the second kind of message we need to indicate error conditions. Now, it's an important point to bear in mind but if something goes wrong in the background worker, don't throw an exception.
The only way we communicate from the Background Worker back to the main page is by calling Post Message. And it's up to you as a developer to decide how to differentiate between normal messages. Such as here's the data, as compared to error messages, like this one. Now, a third category of message that I often find quite useful. Is to pass back diagnostic messages from the Background Worker, to say well, this is what I've done so far. Now, if I show you this example, I just refer back to the original numbers, primes like so.
Between 100 and 80 thousand. What actually happens in the code in the Background Worker, everytime it finds another prime number. Every single prime number that it finds, it posts a single message back to the main page to say right here is another prime number. So, each one of these prime numbers would correspond to a separate post message in my example, to illustrate, well this is what I've got so far. Now, in the main page, I've set up a handler for that. And what it does it displays those messages, those diagnostic messages, in the Console window. The way you get the Console window depends on what type of browser you're using.
In Chrome, you can get it via Developer tools, Internet Explorer and Firefox Firebug have similar mechanisms. In Chrome, the way you see the console is by pressing F12 to bring up the Developers tools window. And then if you click on the Console tab here, it displays the console. These are all the messages that the main page has logged to the console during execution. So, if I just clear the console first of all, and then I'll try it again.
We can't do that when it's running in the Background Worker. You can't set break points, and you haven't got access to the alert function either. Because the Background Worker doesn't have any access to the document object for the main page. It's a fundamental limitation so the mechanism I find most useful is for the Background Worker to post back a message to the main page. To say here's information that I would normally display in an alert box, this information. Can you please do something with it, so the user knows what we've got? And that's what happens here. Console, log, messages, like so.
Right, I think it's time to look at the code. So, I've got Komodo Edit open, and there are actually three files involved, not two. I'll explain why the third file is useful in a moment. All of these files are in your Project Files folder. I've copied them into my Publishing folder for the web, inetpubwwroot. So, what we'll do is we'll first of all take a look at the prime number app.html. Because in there, it illustrates how you can pass and retrieve different kinds of message. Right, so I'm going to scroll down to the bottom of the page, just to discuss the overall layout of the web page itself. So, text boxes for the user to enter the lower number and to enter the upper number.
And then buttons to allow the user to start and to stop the Background Worker. A message area, which is actually displayed in blue because of some styling. And then a text area where all the results for the prime numbers will be displayed. Okay, so that's fairly straightforward. And then, when the page is loaded, I have some code here that just handles the buttons. And sets up some global variables to access those text boxes and the text area. Now, let's take a look at the Start button.
We can't do that because we don't have access to the Document Alert function. The only way to get information back to the user is by post message. It is the only way you can do it. So, that post message is going to post back diagnostic information. What I've done is, in my object that I pass back, whenever I post the message back to the main page. In my strategy here, I always set a property called Type, and the type is a flag, basically, to say what kind of message and I sending. If the type is debug, then the browser will display it in the Console.
And the message will be that this low number. In that order of number and that start time this in fact to be the start of the worker to determine the prime numbers in that range, Okay. So, that's what happens if I set the type to be debug. Before we finish this demo, I'll also take you back into the main page to show how the main page differentiates between these different types of post back. So anyway, this will send back a diagnostic message to say, I am here, effectively.
The second post message is on lines 18 and 19 and this effectively is the equivalent of exception handling. Don't throw an exception. That's not the way to do it. If you want to convey error information back to the main, post a message. And set some sort of flag to say, well this is an error message, as opposed to a normal message. So, I post message, and this time, I decide to set the type flag to be Problem. You can use any mechanism you want here. You could set an integer to be 12345, but somehow, the main page has to know this isn't like a normal message, this is a problem message. And in that case, the message I sent out is this error message here, effectively. That would be equivalent in normal programming to throwing an exception with that error message as the parameter.
But when we're using Background Workers, you have to post it as a message instead of throwing it as an exception. So, we can either post the message with diagnostic information with type equals debug. Or we could set post message with problem information and I have set type equal to problem here. I have closed that mechanism and then finally probably most easily to understand have a look at this. This bit here will loop through all the numbers in the range, and it'll use that Helper function that I looked at about five minutes ago.
And if the number is prime, it pushes it onto an array. That's going to be my full set of prime numbers when we're finished. And then it posts a message here to say, this is how far I've got so far. This is another diagnostic message really, similar to the one we had way up here. And this one says, oh, I've just found another prime number, would you believe it? And the prime number is N. So, prime number 101, for example. So, that's going to happen every time we go on that loop, it's going to do post message. Every time it finds a prime number. And it'll be a type equals debug.
And that's going to logged in the console. Finally, after it's gone through all the numbers, and it's accumulated the full set of primes. Then finally, we're ready to send back the complete set of data. And that once, of course, type equals result. And that will indicate when the thing started, the current time when that will get ended and all the prime numbers that I've managed to find. So, we've almost done here. Let's just take a final look at prime number app.html to see what it does with all those different kinds of message that come in. So, you might now what to expect here.
This is the All Message function and it's just basically an If statement to say what kind of message have I just received. It takes the type flag which is a bit like a discriminator effectively and it says. Well, if you've sent me a debug message, then I'll get the message that you've sent me and I'll log it to the console. So, those were the messages that we saw coming up down here. On the other hand, if the message type is problem, then it displays the arrow message in here, and that's what happened when I type in something like this. Problem occurred, lower number is higher than upper number. And finally, if the data type is result, then it displays a message confirming the result.
And then displays all the prime numbers in the text box. It's a very useful mechanism, very powerful. And I think the key thing to remember is that really it comes down to one simple way to communicate back from the Backward Worker to the main thread. You have to use the post message function and then define some sort of mechanism. That allows the main page to decide how to interpret the incoming data.
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.