What is this?
This app demonstrates how you can use Errai to stream HTML5 device
orientation data from browsers to the server, aggregate that data, and
broadcast it back out to the browsers, again using CDI events.
How does it work?
Client-to-server
Note: some of the boxes in the flowchart are hyperlinks to the associated source code.
- The browser periodically generates deviceorientation events,
which our detector class has registered to receive
- Our DOM deviceorientation listener creates OrientationEvent
and fires it as a CDI event.
- Because there is an OrientationEvent
observer method on the server, ErraiBus routes the event across the
wire to the server
- The server-side observer
method adds this new client orientation data into an aggregated
set of all client orientations.
Server-to-client
Note: some of the boxes in the flowchart are hyperlinks to the associated source code.
- A timer on the server periodically fires, initiating the
process of firing the aggregated set of all known client orientations
(AllClientOrientations)
as a CDI event. (We also weed out clients who we haven't heard from
in the past couple of seconds at this point).
- The server-side ErraiBus routes this event to every connected
client, because they all have CDI Observers for the
AllClientOrientations event.
- On the client, the client-side MessageBus delivers the AllClientOrientations
event to the client-side code.
- The client-side code updates the DOM with the new client
orientations using a CSS3 perspective transform. (Each client is
represented by a <div> element to which the transform is
applied.)
Why is this awesome?
There are lots of reasons, really:
- HTML5 deviceorientation events are one of the newest things you
can do with a web browser, and we've demonstrated how simple it is to
add support for something like this to your own Errai app. The tiny
amount of glue
code provides a bunch of benefits.
- CDI events are a great way to build a loosely
coupled system: the component that generates the OrientationEvents
has no idea who is listening to those events (or even if those
listeners are on the client side or the server side!) Because of
this, it's completely reusable. In fact, we're planning to extract
this demo's set of OrientationEvent producers into an Errai module
that you can reuse.
- Likewise, the observers of these events don't know how those
events are produced. They just process the events when they arrive.
- GWT's deferred binding mechanism gives us a simple, reusable
way to choose the correct producer of OrientationEvents for the
browser we're in.