Reverse AJAX and HTML5 Based Clients for
Embedded Control and Monitoring Systems
C Robson, C Bohm, Stockholm University
or "HTML5, why should we care?"
Clyde Robson RT2010
SAAL Architecture
System Adaptable Application Layers
• Embedded Controllers
o
•
Control Server
o
o
•
Update of logic in run time
Centralized logic
Modular and adaptable
Clients, additional modules
o
o
Loose coupling
Web service communication
Clyde Robson RT2010
Client Server Architecture
Different flavors
• Fat clients
o
o
+ Lower bandwidth use
- Installation and maintenance issues
• n-tier architecture, thin clients
o
o
+ Centralized logic
- Higher bandwidth use for command distribution
• n-tier architecture, web applications
o
o
+ No installation
- Higher bandwidth use for command distribution
Clyde Robson RT2010
Web applications as clients
Or changing the paradigm from:
"Write once, install everywhere, debug everywhere"
to:
"Write once, install nowhere, run everywhere"
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.
Clyde Robson RT2010
AJAX
Asynchronous JavaScript And XML
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"
Clyde Robson RT2010
AJAX continued
Polling, long polling and HTTP server push
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.
Clyde Robson RT2010
AJAX continued
Long polling
Emulation of a server push to a
client:
1. Client requests information
like a normal poll
2. Server responds with the
requested data or holds the
request until new data is
available or sends an empty
response after timeout.
3. Client immediately sends
another request
Clyde Robson RT2010
AJAX continued
HTTP server push
Streaming HTTP:
1. Browser opens a single
persistent connection to the
server.
2. 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.
Clyde Robson RT2010
HTML5 continued
Canvas
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
Clyde Robson RT2010
HTML5 continued
Canvas example
HTML code:
Result:
<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 continued
Web Sockets
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.
Clyde Robson RT2010
HTML5 continued
Web Sockets API
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.
Clyde Robson RT2010
HTML5 continued
Web Sockets Protocol Handshake
Client to the server:
Server response:
GET / HTTP/1.1
Upgrade: WebSocket
Connection: Upgrade
Host: localhost:9877
Origin: http://localhost:8080
\r\n\r\n
HTTP/1.1 101 Web Socket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
WebSocket-Origin: http://localhost:8080
WebSocket-Location: ws://localhost:9877/
WebSocket-Protocol: sample
\r\n\r\n
Clyde Robson RT2010
HTML5 continued
Web Sockets Payload Protocol
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.
Clyde Robson RT2010
HTML5 continued
Web Sockets example
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 continued
Web Workers
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
Clyde Robson RT2010
HTML5 continued
Web Workers API
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.
Clyde Robson RT2010
HTML5 continued
Web Workers example
Main Thread:
Web Worker 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
};
onmessage = function (e) {
var json = JSON.parse (e.data);
var obj;
// Do some work with json, put the result in obj
postmessage(JSON.stringify(obj);
};
Clyde Robson RT2010
SAAL Architecture example
System Adaptable Application Layers
• Embedded Controller
o Implemented in C
o
•
Control Server
o Implemented in EE Java
o
•
Feeding the Control Server with
data
Running logic for Web Sockets
Client implemented with HTML5
Clyde Robson RT2010
Web Client in HTML
Web Client used for development
Connected to a Control
Server in the SAAL
system.
Used for development in
the XFEL control system
project and web based
clients in general.
Clyde Robson RT2010
HTML5 status
Present support and the future
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.
Clyde Robson RT2010
Will HTML5 solve all problems?
Clyde Robson RT2010
Alexander Robson
Thank You!
Clyde Robson RT2010