Messaging: communicating to and from scripts in HTML5 - HTML5 in Action - page 164

The UI is mostly drag and drop. We covered this HTML5 API in great detail in chapter 3 ,
so there's no need to go over it all again. Similarly, updating the display uses the standard
jQuery DOM manipulation methods you're already familiar with. More interesting to us
right now is what happens when the plan object is updated by these UI actions and events
that arrive via a WebSocket. In the next step, you'll look at the code that handles this; in
the following step, you'll look at the server-side code to handle the updates.
Step 3: Handle updates in the browser
Now create the client orchestrator code; for this create a new file called planner-browser.js
in your working directory. The next listing shows the event listeners on the WebSocket that
will update the model and the event listeners on the planner object that trigger messages to
be sent through the WebSocket.
The WebSocket listeners are added by setting ws.onmessage . And listeners on the plan-
ner object are added with plan.on() .