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.