Game Development Reference
In-Depth Information
API usage
A general description and demonstration of each of the APIs used in the game are
given in the following sections. For an explanation of how each piece of functional-
ity was incorporated into the final game, look at the code section. For the complete
source code for this game, check out the topic's page from Packt Publishing's web-
site.
Web messaging
Web messaging allows us to communicate with other HTML document instances,
even if they're not in the same domain. For example, suppose our snake game, hos-
ted at
http://snake.fun-html5-games.com
, is embedded into a social website through
iframe
(let's say this social website is hosted at
http://www.awesome-htm-
l5-games.net
). When the player achieves a new high score, we want to post that data
from the snake game directly into the host page (the page with
iframe
from which
the game is loaded). With the web messaging API, this can be done natively, without
the need for any server-side scripting whatsoever.
Before web messaging, documents were not allowed to communicate with documents
in other domains mostly because of security. Of course, web applications can still be
vulnerable to malicious external applications if we just blindly take messages from any
application. However, the web messaging API provides some solid security measures
to protect the page receiving the message. For example, we can specify the domains
that the message is going to, so that other domains cannot intercept the message.
On the receiving end, we can also check the origin from whence the message came,
thus ignoring messages from any untrusted domains. Finally, the DOM is never direc-
tly exposed through this API, providing yet another layer of security.
How to use it
Similar to web workers, the way in which two or more HTML contexts can communic-
ate through the web messaging API is by registering an event handler for the on-mes-
sage event, and sending messages out by using the
postMessage
function:
// ---------------------------------
// Host document: web-messaging.html
