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 o Update of logic in run time Control Server o Centralized logic o Modular and adaptable Clients, additional modules o Loose coupling o Web service communication Clyde Robson RT2010

3. Client Server Architecture Different flavors Fat clients o + Lower bandwidth use o - Installation and maintenance issues n-tier architecture, thin clients o + Centralized logic o - Higher bandwidth use for command distribution n-tier architecture, web applications o + No installation o - 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" 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.

5. AJAX Asynchronous 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"

6. AJAX continued Polling, 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.

7. AJAX continued Long polling Clyde Robson RT2010 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

8. AJAX continued HTTP server push Clyde Robson RT2010 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.

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

10. HTML5 continued Canvas Clyde Robson RT2010 The 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

11. HTML code: 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 Canvas example Result:

12. HTML5 continued Web 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.

13. HTML5 continued Web 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.

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

15. HTML5 continued Web 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.

16. 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 Sockets example

17. HTML5 continued Web 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

18. HTML5 continued Web 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.

19. 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 obj postmessage(JSON.stringify(obj); }; Clyde Robson RT2010 HTML5 continued Web Workers example

20. SAAL Architecture example System Adaptable Application Layers Embedded Controller o Implemented in C o 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

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

22. HTML5 status Present 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.

23. Will HTML5 solve all problems? Clyde Robson RT2010 Alexander Robson

24. Thank You! Clyde Robson RT2010