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.

  1. The browser periodically generates deviceorientation events, which our detector class has registered to receive
  2. Our DOM deviceorientation listener creates OrientationEvent and fires it as a CDI event.
  3. Because there is an OrientationEvent observer method on the server, ErraiBus routes the event across the wire to the server
  4. 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.

  1. 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).
  2. The server-side ErraiBus routes this event to every connected client, because they all have CDI Observers for the AllClientOrientations event.
  3. On the client, the client-side MessageBus delivers the AllClientOrientations event to the client-side code.
  4. 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: