Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
Skill Level Intermediate
So this is our little chat application, and you can see that I can type in a message here, "hi there," and it comes up over there. And I can type in a message here and it says, "hi back," and that one comes up over here. And these are in two different domains, which means that they're in two different origins for the purposes of the same-origin policy. So let's take a look at how this works and how this is implemented. Here we have chat-one.html, and this is the one that's running on one.3sn.net, and here we have chat-two.html, which is running on two.3sn.net.
So before we move forward, let's just take a quick browse through it for the people that are typing along with us. So that was chat-one.html, and now we'll look at chat-two.html. And the time-string gets cut off there just a little bit. There it is. And there we have it. So the first thing you want to do is you want to come down here in both of these and make sure that your URLs and origin strings are correct for your server.
These are correct for my server here on 36 and 37 in the chat-one, and in chat-two it's right there on line 24. So you want to make sure that those are correct for your server. So there are a couple of things that are different here and that make this work. First of course we have the init function, which gets called by onload, way down there on line 131. And in chat-one really all its doing is setting up the event handlers, loading the frame, and selecting the chat text box.
And so if we come down here into the HTML, you notice that we just have this little form with an onSubmit, so it doesn't have a Submit button. All you do is press Enter on the one field. And it's got this one text field, and it is called chatText. So up here in the init function you see it gets that element using the little element shortcut that I've got down here in my Utilities. It gets that element and it calls select on it, and that's what gives it, when we load this page up, you notice the first thing it does is it selects whatever text is in that box and it puts the cursor there.
Other than that, it's just waiting for a message to come in. And when a message does come in, it calls this handleMessage event handler, and you'll notice that it calls JSON.parse on the event data. And the reason for this is that whenever we send a message--notice here is our sendChat function--when we send a message we call sendObject, and sendObject actually takes that message and it calls stringify on the JSON, so that it takes that message it, converts it to JSON, and then it post it as a text string.
And the reason for this of course is so that it will work in Internet Explorer. So that adds a little bit of complexity. chat-two is almost exactly the same. The main difference being in the init. Because when the init gets called, it can grab that parent object and call it windowOne, and it calls sendObject again so that it gets JSON-stringified to send that windowTwo loaded message we saw over here info windowTwo loaded.
And so all of the messages are being sent as structured data. So this message is being sent as an info-type message, and the chat messages are being sent as chat-type messages. And all of that gets stringified in sendObject. So really, those are the only significant differences between this and the applications that we've seen earlier, and so it makes it really simple to send arbitrary data back and forth between two windows in different origins.
So you can see that the HTML5 messaging API is simple enough that it can get out of your way and allow you to get creative with your applications. Obviously this is a contrived application designed to demonstrate the features of the interface, but hopefully you can see how easy it is to implement cross- origin scripting with the HTML5 messaging API, and now you can use it in your own real-world applications.