Reverse AJAX and HTML5 Based Clients for Embedded Control and Monitoring Systems

1. 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

2. SAAL Architecture System Adaptable Application Layers • Embedded Controllers • Update of logic in run time • Control Server • Centralized logic • Modular and adaptable • Clients, additional modules • Loose coupling • Web service communication Clyde Robson RT2010

3. Client Server Architecture Different flavors • Fat clients • + Lower bandwidth use • - Installation and maintenance issues • n-tier architecture, thin clients • + Centralized logic • - Higher bandwidth use for command distribution • n-tier architecture, web applications • + No installation • - Higher bandwidth use for command distribution Clyde Robson RT2010

4. 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

5. 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

6. 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

7. AJAX continued Long polling • Emulation of a server push to a client: • 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 Clyde Robson RT2010

8. AJAX continued HTTP server push • Streaming HTTP: • 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

9. 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

10. 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

11. HTML5 continued Canvas example 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); Result: Clyde Robson RT2010

12. 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

13. 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

14. HTML5 continued Web Sockets Protocol Handshake Server response: 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 Client to the server: GET / HTTP/1.1 Upgrade: WebSocket Connection: Upgrade Host: localhost:9877 Origin: http://localhost:8080\r\n\r\n Clyde Robson RT2010

15. 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

16. HTML5 continued Web Sockets example Server response (payload data): os.write (0x00); String payload = "Some data"; os.write (payload.getBytes ("utf-8")); os.write (0xff); os.flush (); 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); }; Clyde Robson RT2010

17. 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

18. 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

19. HTML5 continued Web Workers example Web Worker Thread: 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); }; 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  }; Clyde Robson RT2010

20. SAAL Architecture example System Adaptable Application Layers • Embedded Controller • Implemented in C • Feeding the Control Server with data • Control Server • Implemented in EE Java • Running logic for Web Sockets • Client implemented with HTML5 Clyde Robson RT2010

21. 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

22. 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

23. Will HTML5 solve all problems? Clyde Robson RT2010Alexander Robson

24. Thank You! Clyde Robson RT2010