Reverse AJAX and HTML5 Based Clients for Embedded Control and Monitoring SystemsC Robson, C Bohm, Stockholm University

or "HTML5, why should we care?"

Clyde Robson RT2010

SAAL ArchitectureSystem Adaptable Application Layers

• Embedded Controllerso Update of logic in run time

• Control Servero Centralized logic o Modular and adaptable

• Clients, additional moduleso Loose couplingo Web service communication

Clyde Robson RT2010

Client Server ArchitectureDifferent flavors

• Fat clientso + Lower bandwidth useo - Installation and maintenance issues

• n-tier architecture, thin clientso + Centralized logic o - Higher bandwidth use for command distribution

• n-tier architecture, web applicationso + No installationo - Higher bandwidth use for command distribution

Clyde Robson RT2010

Web applications as clientsOr changing the paradigm from:"Write once, install everywhere, debug everywhere"to:"Write once, install nowhere, run everywhere"

Clyde Robson RT2010

Web browsers have evolved over the years. They are today more to be seen as execution environments than simply something that can display information. Web applications are more than "html pages", they are software to be run in this execution environment, the web browser.

You can even "install" them in the web browser , like software in an operating system. These are called browser add-ons.

AJAXAsynchronous JavaScript And XML

Clyde Robson RT2010

Name first defined by Jesse James Garrett in 2005:"Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:• standards-based presentation using XHTML and CSS;• dynamic display and interaction using the Document Object Model (DOM); • data interchange and manipulation using XML and XSLT;• asynchronous data retrieval using XMLHttpRequest;• and JavaScript binding everything together."

"http://www.adaptivepath.com/ideas/essays/archives/000385.php"

AJAX continuedPolling, long polling and HTTP server push

Clyde Robson RT2010

Three ways to update the client:• Regular polling• Long polling• HTTP server push (aka HTTP streaming)

The term "Comet" is used as an umbrella term for Long polling and HTTP server push.

These techniques work well, but they start pushing the web browser out of it's comfort zone. Web Sockets in HTML5 will push the browser back in again as we will see later.

AJAX continuedLong polling

Clyde Robson RT2010

Emulation of a server push to a client:

1. Client requests information like a normal poll

• Server responds with the requested data or holds the request until new data is available or sends an empty response after timeout.

• Client immediately sends another request

AJAX continuedHTTP server push

Clyde Robson RT2010

Streaming HTTP:1. Browser opens a single

persistent connection to the server.

• Server sends data when it is available, the browser interprets it, but neither side closes the connection.

The client holds an invisible IFrame, sent as a chunked block (infinitely long). Data is arrived as script tags containing JavaScript, gradually filling the iFrame and interpreted as they arrive.

Clyde Robson RT2010

HTML5"A new kid on the block"

Introducing new features for drawing, networking and background processing (among other things) .• Canvas tags for drawing• Web sockets for networking• Web workers for background processing• Web storage for persistent data storage

 HTML5 supported by W3C since October 2006.W3C abandoned own work with XHTML 2.0 in favor of HTML5 late 2009.HTML5 is here to stay.

HTML5 continuedCanvas

Clyde Robson RT2010

The <canvas> element is a bitmap canvas which can be used for rendering graphs, images etc.• The element itself is part of the DOM, not the

individual pixels.• Web graphs are faster and uses less CPU with

canvas since you don't have to manipulate DOM when updating the graph.

• Easy to work with JavaScript 

HTML code:<canvas id="ex" width="200" height="200" style="border:1px solid"></canvas>

JavaScript Code:var example = document.getElementById('ex');var context = example.getContext('2d');context.fillStyle = "rgb(255,0,0)";context.fillRect (30, 30, 50, 50);

Clyde Robson RT2010

HTML5 continuedCanvas example

Result:

HTML5 continuedWeb Sockets

Clyde Robson RT2010

More than an alternative to the XMLHttpRequest object used for AJAX:• Bi-directional, full-duplex communications channel.• Designed to be implemented in web browsers and

web servers.• Extremely low overhead for payloads, only two

bytes! API standardized by the W3C and the protocol is being standardized by the IETF.

HTML5 continuedWeb Sockets API

Clyde Robson RT2010

Very simple API:• WebSocket - constructor that opens a connection to server.• onopen - event handler that fires when connection has been

established.• onmessage - event handler that fires when receiving data.• onerror - event handler that fires when there is an error.• onclose - event handler that fires when the server is closing

the connection.• send - send data to server.• close - close socket.

Client to the server:

GET / HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: localhost:9877Origin: http://localhost:8080\r\n\r\n

Server response:

HTTP/1.1 101 Web Socket Protocol HandshakeUpgrade: WebSocket Connection: Upgrade WebSocket-Origin: http://localhost:8080 WebSocket-Location: ws://localhost:9877/ WebSocket-Protocol: sample\r\n\r\n

Clyde Robson RT2010

HTML5 continuedWeb Sockets Protocol Handshake

HTML5 continuedWeb Sockets Payload Protocol

Clyde Robson RT2010

Each frame starts with a 0x00 byte, ends with a 0xFF byte, and contains UTF-8 data in between. The API is standardized by the W3C and the protocol is being standardized by the IETF.

Client side:var ws = new WebSocket("ws://localhost:9877/");ws.onopen = function (e) {alert("Connected to Control Server"); };ws.onclose = function (e) {alert("Connection closed");}; ws.onmessage = function (e) {alert("Received data = "+e.data);}; 

Server response (payload data):os.write (0x00);String payload = "Some data";os.write (payload.getBytes ("utf-8"));os.write (0xff);os.flush ();

Clyde Robson RT2010

HTML5 continuedWeb Sockets example

HTML5 continuedWeb Workers

Clyde Robson RT2010

Web Workers allow us to offload heavy computations from the main thread. Heavy computations will not lock up the browser. Web Workers spawn real threads in the underlying operating system. They are JavaScript files that are loaded and executed in a sandbox off the main thread.  An interesting example of what can be done:http://htmlfive.appspot.com/static/tracker1.html

HTML5 continuedWeb Workers API

Clyde Robson RT2010

Very simple API:• Worker - constructor that creates a new Web Worker.• onmessage - event handler that fires when receiving data

from worker.• postMessage - send data to worker.

Main Thread:var worker = new Worker("scripts/inputWorker.js");var json = {a: 1, b: 2};worker.postmessage(JSON.stringify(json));worker.onmessage = function (e) {var obj = JSON.parse (e.data);  // Do something with obj };  

Web Worker Thread:onmessage = function (e) {var json = JSON.parse (e.data);var obj; // Do some work with json, put the result in objpostmessage(JSON.stringify(obj);};

Clyde Robson RT2010

HTML5 continuedWeb Workers example

SAAL Architecture exampleSystem Adaptable Application Layers

• Embedded Controllero Implemented in Co Feeding the Control Server

with data• Control Server

o Implemented in EE Java o Running logic for Web Sockets

• Client implemented with HTML5

Clyde Robson RT2010

Web Client in HTML Web Client used for development

Clyde Robson RT2010

Connected to a Control Server in the SAAL system.Used for development in the XFEL control system project and web based clients in general.

HTML5 statusPresent support and the future

Clyde Robson RT2010

All HTML5 specific techniques in this presentation are supported by the latest versions of Google Chrome and soon in Apple's Safari. This is of no surprise since both Google and Apple publicly have announced support for HTML5. Firefox doesn't support Web Sockets until v3.7.

Microsoft will offer (some?) support in Internet Explorer 9.

Expect better performance of native functions in future versions. 

Will HTML5 solve all problems?

Clyde Robson RT2010Alexander Robson

Thank You! 

Clyde Robson RT2010