SlideShare a Scribd company logo
Ch’ti JUG
            HTML5 Communication
              Building Real-Time
            Applications with HTML5
                  Web Sockets
                  Ch'ti Java User Group
                   http://chtijug.org/

                                       Peter Lubbers, Kaazing
                                         10 December 2009

              Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
Ch’ti JUG        Qui C’est Ce Mec?
            Peter Lubbers
            • Director of documentation
              and training at Kaazing
            • Skills Matter and Zenika
              HTML5 training courses
            • Co-author Apress Book
              Pro HTML5 Programming
              (Spring 2010)
            • Ultramarathon runner, blogger
              runlaketahoe.blogspot.com
                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                                              Agenda
            • Introduction
            • History of the real-time Web
            • WebSocket and Server-Sent Events
            • Cross-Document Messaging and
              XHR Level 2
            • Beyond WebSocket
            • Questions?




                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                     Today’s Requirements
            • Today’s Web applications demand
              reliable, real-time communications with
              near-zero latency
            • Examples:
               • Financial applications
               • Social networking applications
               • Online games
               • Smart power grid

                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                              HTTP Limitations
            • Until now, this has been cumbersome to
              achieve, primarily due to the limitations
              of HTTP
            • HTTP is half-duplex (traffic flows in only
              one direction at a time)
            • HTTP is a stateless, request-driven
              protocol




                   Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                              HTTP Limitations
            • Header information is sent with each
              HTTP request and response, which can
              be an unnecessary overhead
            • After a response is sent, the server may
              choose to close the socket
            • Rich Internet Applications (with Ajax,
              Comet, Silverlight, and Flash) are
              becoming richer, but still limited by
              HTTP

                   Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                                Ajax and Comet
            • Ajax (Asynchronous JavaScript and
              XML) is a technique for building highly
              interactive applications for the Web
            • Content can change without loading the
              entire page
            • Ajax Delivers:
              • User-perceived low latency
              • Single page
            • “Real-time” often achieved through
              polling and long-polling (Comet)
                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                                               Polling
            • Polling is “nearly real-time”
            • Sometimes used in Ajax applications to
              simulate real-time communication
            • Browser sends HTTP requests at regular
              intervals and immediately receives a
              response




                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                   Polling Architecture




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                                      Long Polling
            • Also known as asynchronous-polling
            • Browser sends a request to the server
              and the server keeps the request open for
              a set period.
            • HTTP headers, present in both long-
              polling and polling often account for
              more than half of the network traffic.




                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            Long Polling Architecture




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                                          Streaming
            • More Efficient, but still not perfect
            • Possible complications:
               • Proxies and Firewalls
               • Response builds up and must be flushed
                 periodically
               • Cross-domain issues to do with browser
                 connection limits




                   Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            Half-Duplex Architecture




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
             Streaming Architecture




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
             Current Approaches Are…




                Fake Time!
            Or: Not Really Time
              Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            Example of Polling in Action




                Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            HTTP Header Overhead




              Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG       Example HTTP Request
            GET /PollingStock//PollingStock HTTP/1.1
            Host: localhost:8080
            User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;
               rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5
            Accept:
               text/html,application/xhtml+xml,application/xml;q=0.9,*/*;
               q=0.8
            Accept-Language: en-us
            Accept-Encoding: gzip,deflate
            Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
            Keep-Alive: 300
            Connection: keep-alive
            Referer: http://localhost:8080/PollingStock/
            Cookie: showInheritedConstant=false;
               showInheritedProtectedConstant=false;
               showInheritedProperty=false;
               showInheritedProtectedProperty=false;
               showInheritedMethod=false;
               showInheritedProtectedMethod=false;
               showInheritedEvent=false; showInheritedStyle=false;
               showInheritedEffect=false
                    Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
               Example HTTP Response
            HTTP/1.x 200 OK
            X-Powered-By: Servlet/2.5
            Server: Sun Java System Application Server 9.1_02
            Content-Type: text/html;charset=UTF-8
            Content-Length: 321
            Date: Sat, 07 Nov 2009 00:32:46 GMT




                    Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            HTTP Header Traffic Analysis
            • Example network throughput for Polling
              HTTP request and response headers:
              • Use case A: 10,000 clients polling every 60
                seconds:
                 • Network throughput is (871 x 10,000)/60 = 145,166
                   bytes = 1,161,328 bits per second (1.1 Mbps)
              • Use case B: 10,000 clients polling every second:
                 • Network throughput is (871 x 10,000) = 8,710,000
                   bytes = 69,680,000 bits per second (66 Mbps)
              • Use case C: 100,000 clients polling every 10
                seconds:
                 • Network throughput is (871 x 100,000)/10 = 8710000
                   bytes = 69,680,000 bits per second (66 Mbps)
                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            Network Throughput Comparison




                Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            Technology-Specific Problems
            • AJAX
              • Enables clients to asynchronously poll for
                server-side events (at best)
              • Polling leads to poor resource utilization on
                both the client and server
            • Comet
              • Lack of a standard implementation
              • Often requires complex techniques such as
                multiplexing or managing multiple domains



                   Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                              Headache 2.0




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                        Desktop vs. Browser
            • Desktop Networking
              • Full-duplex bidirectional TCP sockets
              • Access any server on the network
            • Browser Networking
              • Half-duplex HTTP request-response
              • HTTP polling, long polling fraught with
                problems




                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                 Desktop Architecture




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                                   About HTML5
            • HTML5 is the next set of W3C HTML
              standards
            • It offers new and enhanced features to
              address new HTML primitives,
              multimedia, offline use, communication,
              and so on
            • Many of the browser vendors have
              already implemented several of these
              features


                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                               HTML5 Features
            • HTML5 includes a wide range of new
              features, including:
              •   Canvas
              •   Workers
              •   Geolocation
              •   New form elements
              •   Offline storage
              •   Communication APIs
              •   And more…


                   Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
              HTML5 Communication
            • WebSocket
              • Proxy/Firewall-friendly text socket for
                browsers
            • Server-Sent Events
              • Standardized HTTP streaming (downstream)
            • XMLHttpRequest Level 2
              • Cross-origin XMLHttpRequest
            • Cross Document Messaging
              • Secure inter-window (iframe)
                communication
                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            Part of the HTML5 Spec?
            • Web Sockets—like other pieces of the
              HTML5 effort such as Local Storage and
              Geolocation—was originally part of the
              HTML5 specification
            • Moved to a separate standards document
              to keep the specification focused
            • Web Sockets has been submitted to the
              Internet Engineering Task Force (IETF)
              by its creators, the WHATWG


                 Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG      HTML5 WebSockets
            • HTTP-friendly TCP for the browser with
              minimal framing
            • Full-duplex bidirectional communication
            • Operates over a single socket
            • Distributed client-server architecture
            • No browser plug-ins
            • Traverses proxies and firewalls seamlessly
            • Allows authorized cross-origin
              communication

                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            WebSocket Architecture




               Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG      HTML5 WebSockets

            • Connection established by upgrading
              from the HTTP protocol to the WebSocket
              protocol using the same TCP connection
            • WebSocket data frames can be sent back
              and forth between the client and the
              server in full-duplex mode




                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG   HTML5 WebSocket Schemes
            • WebSocket
              ws://www.websocket.org/text
            • WebSocket Secure
              wss://www.websocket.org/encrypted-text




                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            HTML5 WebSocket Handshake
             GET /text HTTP/1.1rn
             Upgrade: WebSocketrn
             Connection: Upgradern
             Host: www.websocket.orgrn
             …rn

             HTTP/1.1 101 WebSocket Protocol
             Handshakern
             Upgrade: WebSocketrn
             Connection: Upgradern
             …rn


                 Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                    HTML5 WebSocket Frames
            • Text and binary frames can be sent full-duplex, in either
              direction at any the same time
            • Each frame of data:
                •   Starts with a 0x00 byte
                •   Ends with a 0xFF byte
                •   Contains UTF-8 data in between
            • Text Frames use terminator
                •   x00Hello, WebSocket0xff
            • Binary Frames use length prefix:
                •   x000x10Hello, WebSocket
            • There is no defined maximum size
                •   If the user agent has content that is too large to be handled, it
                    must fail the Web Socket connection
                •   JavaScript does not allow >4GB of data, so that is a practical
                    maximum
                     Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
              Drastic Reduction in Network
                         Traffic
            • With WebSocket, each frame has only 2
              bytes of packaging (compare almost 500:1
              or even 1000:1)
            • No latency involved in establishing new
              TCP connections for each HTTP message
            • Remember the Polling HTTP header traffic
              (66 Mbps network throughput for headers
              alone)?


                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            HTTP Header Traffic Analysis
            • Example network throughput for
              WebSocket HTTP request and response
              headers:
              • Use case A: 10,000 frames every 60 seconds:
                 • Network throughput is (2 x 10,000)/60 = 333 bytes =
                   2,664 bits per second (2.6 Kbps)
              • Use case B: 10,000 frames every second:
                 • Network throughput is (2 x 10,000) = 20,000 bytes =
                   160,000 bits per second (156 Kbps)
              • Use case C: 100,000 frames every 10 seconds:
                 • Network throughput is (2 x 100,000)/10 = 20,000
                   bytes = 160,000 bits per second (156 Kbps)

                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            Network Throughput Comparison




                Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                                     Overheard…
            "Reducing kilobytes of data to 2
             bytes…and reducing latency from 150ms
             to 50ms is far more than marginal. In
             fact, these two factors alone are enough
             to make WebSocket seriously interesting
             to Google.“
             —Ian Hickson (Google, HTML5 spec lead)




                 Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG   HTML5 WebSockets API

            • Creating a WebSocket instance:
              var myWebSocket = new WebSocket
                (“ws://www.websocket.org”);




                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG   HTML5 WebSockets API
            • Associating listeners
              myWebSocket.onopen = function(evt) {
                alert(“Connection open ...”); };
              myWebSocket.onmessage =
                function(evt) { alert( “Received
                Message: ” + evt.data); };
              myWebSocket.onclose = function(evt)
                { alert(“Connection closed.”); };




                   Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG   HTML5 WebSockets API

            • Sending messages
              myWebSocket.send(“Hello
                WebSocket!”);
              myWebSocket.close();




                 Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                             Browser Support
            • Chromium support added just a few weeks
              ago (nightly builds)
            • Webkit activity




                 Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                Native WebSocket in Chromium

            :




                   Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
             HTML5 Server-Sent Events

            • Standardizes and formalizes how a
              continuous stream of data can be sent
              from a server to a browser
            • Introduces EventSource—a new
              JavaScript API




                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
               SSE Architecture




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG         EventSource API

            • Connects to a server URL to receive an event
              stream:
              var stream =
                new EventSource("http://news.kaazing.com");


            • Set event handlers:
              stream.onopen = function() { alert(“open”); }
              stream.onmessage = function(event) {
                     alert(“message: “ + event.data); }
              stream.onerror = function() { alert(“error”);
                }



                   Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                             Browser Support

            • Partial support in Opera 9+
            • Development in Firefox trunk




                 Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                  XMLHttpRequest Level 2
            • XMLHttpRequest is the API that made Ajax
              possible
            • XMLHttpRequest Level 2 significantly
              enhances XMLHttpRequest
            • Improvements in the following areas:
              • Progress events
              • Cross-origin XMLHttpRequests




                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                     Progress Events
            • XMLHttpRequest Level 2 supports named
              progress events:
              •   loadstart
              •   progress
              •   abort
              •   error
              •   load
              •   loadend
            • readyState property and
              readystatechange events retained for
              backward compatibility
                    Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                       Progress Events
            • Progress events have fields for:
              • The total amount of data to transfer
              • The amount that has already transferred
              • Whether the total is known (Boolean value)
            • Example:
              crossOriginRequest.upload.onprogress = function(e) {
                  var total = e.total;
                  var loaded = e.loaded;


                  if (e.lengthComputable) {
                           // do something with the progress information
                  }
              }

                      Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            Cross-Origin XMLHttpRequest
            • XMLHttpRequest Level 2 allows for cross-
              origin XMLHttpRequests using Cross
              Origin Resource Sharing (CORS)
              http://www.w3.org/TR/access-
                 control/
            • Example:
              var crossOriginRequest = new
                XMLHttpRequest();
              crossOriginRequest.open("GET",
                "http://www.example.net/stockfeed",
                true);

                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG          Origin Security
            • An origin is a subset of an address used for
              modeling trust relationships on the Web
            • Origins are made up of a scheme, a host, and
              a port—different origin:
              • https://www.example.com
              • http://www.example.com
            • The path is not considered in the origin
              value—same origin:
              • http://www.example.com/index.html
              • http://www.example.com/page2.html


                   Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG          Origin Security
            • Cross-origin communication identifies the
              sender by origin
              • Allows receiver to ignore messages from
                origins it does not trust or does not expect to
                receive messages from (white list)
              • Applications must opt-in to receiving
                messages by adding an event listener for
                message events
              • No risk of messages interfering with an
                unsuspecting application



                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                  Preflight Requests
            • For sensitive actions (for example, a
              request with credentials, or a request other
              than GET or POST), an OPTIONS preflight
              request is sent to the server to see if the
              action is supported and allowed
            • Successful communication may require a
              CORS-capable server




                   Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG   Cross-Origin HTTP Headers
            • A cross-origin exchange between a page
              hosted on www.example.com and a service
              hosted on www.example.net (Request):
              POST /main HTTP/1.1
              Host: www.example.net
              User-Agent: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1.3)
                 Gecko/20090910 Ubuntu/9.04 (jaunty) Shiretoko/3.5.3
              Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
              Accept-Language: en-us,en;q=0.5
              Accept-Encoding: gzip,deflate
              Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
              Keep-Alive: 300
              Connection: keep-alive
              Referer: http://www.example.com/
              Origin: http://www.example.com
              Pragma: no-cache
              Cache-Control: no-cache
              Content-Length: 0

                    Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            Cross-Origin HTTP Headers
            • Cross-origin exchange between a page
              hosted on www.example.com and a service
              hosted on www.example.net (Response):
              HTTP/1.1 201 Created
              Transfer-Encoding: chunked
              Server: Kaazing Gateway
              Date: Mon, 02 Nov 2009 06:55:08 GMT
              Content-Type: text/plain
              Access-Control-Allow-Origin: http://www.example.com
              Access-Control-Allow-Credentials: true




                    Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            Cross-Origin XMLHttpRequest
            • Allows you to build web applications that
              use services hosted on different origins
              • For example, a web application that used static
                content from one origin and Ajax services from
                another
            • Allows client-side aggregation (the
              ultimate mashup)




                   Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            Client-Side Aggregation




               Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                               Browser Support
            • Latest versions of
              • Firefox
              • Chrome
              • Safari




                   Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG   Cross Document Messaging
            • Enables secure cross-origin
              communication across iframes, tabs, and
              windows (using origin security)
            • Defines the PostMessage API as a
              standard way to send messages
            • Provides asynchronous message passing
              between JavaScript contexts




                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG    Cross Document Messaging
            • Can be accomplished by direct scripting
              (a script running in one page tries to
              manipulate another document), but
              may not be allowed due to security
              restrictions




                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG   PostMessage Overview




              Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG      HTML5 PostMessage
            • Allows you to communicate between
              documents served by different origins
            • Also handy for same-origin messaging,
              because it provides a consistent, easy to use
              API (for example, HTML5 Web Workers)




                   Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG     HTML5 PostMessage
            • Sending a message:
              myFrame.contentWindow.postMessage
                ('Hello, world',
                'http://www.example.com/');




                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                        HTML5 PostMessage
            • Listening for messages:
              window.addEventListener(“message”, messageHandler,
                true);
              function messageHandler(e) {
                  switch(e.origin) {
                    case “friend.example.com”:
                    // process message
                    processMessage(e.data);
                    break;
                  default:
                    // message origin not recognized
                    // ignoring message
                }
              }
                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                                Browser Support
            •   Firefox 3.5 and greater
            •   Safari 4.0 and greater
            •   Chrome 2.0 and greater
            •   Opera 9.6 and greater
            •   Internet Explorer 8 (supports cross-frame
                but not cross-window messaging)




                    Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
             Extending HTML5 WebSockets
            • Once you have a bi-directional, full-
              duplex socket connection, you can do all
              kinds of great things in a browser
            • Any TCP-based protocol works over
              WebSocket
              • JMS, AMQP, STOMP, XMPP, IMAP, AMQP,
                IRC, and more
              • Custom Protocols
            • Binary Protocols
              • Encode Binary as Text

                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                       Stomp Example
            • Streaming Text Oriented Messaging
              Protocol
            • Connect to a message broker to
              publish and subscribe to channels and
              topics
            • Example message brokers that
              support Stomp:
              • RabbitMQ
              • ActiveMQ
              • More
                 Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG           Stomp Protocol
            Stomp commands Server frames
            •   ABORT                             • ERROR
            •   ACK                               • MESSAGE
            •   BEGIN                             • RECEIPT
            •   COMMIT
            •   CONNECT
                                                  Example Stomp frame:
            •   DISCONNECT
                                                       CONNECTn
            •   SEND                                   login: <username>n
            •   SUBSCRIBE                              passcode:<passcode>n
            •   UNSUBSCRIBE                            n
                                                       ^@

                   Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
               Example Stomp Client
            • Stomp Client
              var myStomp = new StompClient();
              myStomp.onopen =
                function(headers) {
                  myStomp.subscribe(“/topic/destination”);
                }
              myStomp.onmessage =
                function(headers, body) { alert(body); }
              myStomp.connect(“ws://www.websocket.org/stomp”);
              myStomp.send(“Hello STOMP!”,
                           “/topic/destination”);




                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            Kaazing WebSocket Gateway
            • Enterprise Grade WebSocket server
            • Seamlessly and reliably extends any TCP-
              based business messaging protocol to the
              Web with ultra high performance and
              minimal latency
            • Requires no third-party browser plug-in or
              client-side installation
            • Provides emulation for older browsers so
              you can code against the new standards
              today

                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                  Browser Certification
            • Supports native HTML 5
              Communications (when available) as well
              as emulation for current browsers
            • Certified Browser Versions:
              •   Apple Safari 3.0+
              •   Google Chrome 1.0+
              •   Microsoft Internet Explorer 5.5+
              •   Mozilla Firefox 1.5+
              •   Opera 9.5+


                    Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                        Client Libraries
            •   Stomp and the Stomp-JMS Adapter
            •   AMQP
            •   XMPP (Jabber)
            •   IRC
            •   Darkstar
            •   More added all the time




                    Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
            Client Library Technologies
            • JavaScript
            • Adobe Flex (Flash)
            • Microsoft Silverlight (Kaazing is a
              Microsoft Silverlight partner)
            • Java and JavaFX (Kaazing is a Sun
              Microsystems partner)




                  Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
               Financial Applications




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
               Financial Applications




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                      Earth Control Game
            http://apps.facebook.com/earthcontrol




               Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                                Chess Vegas
                http://www.chessvegas.com/




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG
                              Degony Game
                      http://www.degony.com




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG      Important Links
            • Kaazing Website:
              www.kaazing.com
            • Kaazing Technology Network:
              http://tech.kaazing.com/
            • Download Kaazing WebSocket Gateway:
              http://www.kaazing.com/download
            • “When can I use” site:
              http://a.deveria.com/caniuse/
            • Skills Matter:
              www.skillsmatter.com
            • Zenika:
              http://www.zenika.com
                Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG


                         Question 1
                      Win a jQuery book




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            What does “Stomp” stand for?




              Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG


                    Question 2
              Win a jetBrains license




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG




            Which browser supports
             WebSockets natively?




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG

                     Raffle (Tombola)
                     Win an iPod Touch
                      Sponsored by:




            Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG                                   Cocktail

            • Merci pour votre attention
            • Merci au Groupe ADEO pour son
              sponsoring




                 Copyright © Kaazing—License Creative Commons 2.0 France
Ch’ti JUG                                    Licence
            • Les photos et logos appartiennent à leurs
              auteurs respectifs
            • Le contenu de la présentation est sous
              licence Creative Commons 2.0 France
            • Contrat Paternité
            • Pas d'Utilisation Commerciale
            • Partage des Conditions Initiales à
              l'Identique
            • http://creativecommons.org/licenses/by-
              nc-sa/2.0/fr/

                 Copyright © Kaazing—License Creative Commons 2.0 France

More Related Content

What's hot

WebSocket Perspectives and Vision for the Future
WebSocket Perspectives and Vision for the FutureWebSocket Perspectives and Vision for the Future
WebSocket Perspectives and Vision for the Future
Frank Greco
 
Apache httpd 2.4 Reverse Proxy: The Hidden Gem
Apache httpd 2.4 Reverse Proxy: The Hidden GemApache httpd 2.4 Reverse Proxy: The Hidden Gem
Apache httpd 2.4 Reverse Proxy: The Hidden Gem
Jim Jagielski
 
Real Life WebSocket Case Studies and Demos
Real Life WebSocket Case Studies and DemosReal Life WebSocket Case Studies and Demos
Real Life WebSocket Case Studies and Demos
Peter Moskovits
 
Velocity 2012: The 90-Minute Mobile Optimization Life Cycle
Velocity 2012: The 90-Minute Mobile Optimization Life CycleVelocity 2012: The 90-Minute Mobile Optimization Life Cycle
Velocity 2012: The 90-Minute Mobile Optimization Life Cycle
Strangeloop
 
Apache httpd Reverse Proxy and Tomcat
Apache httpd Reverse Proxy and TomcatApache httpd Reverse Proxy and Tomcat
Apache httpd Reverse Proxy and Tomcat
Jim Jagielski
 
Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015
Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015
Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015
Rich Cullen
 
What's New and Newer in Apache httpd-24
What's New and Newer in Apache httpd-24What's New and Newer in Apache httpd-24
What's New and Newer in Apache httpd-24
Jim Jagielski
 
Apache httpd 2.4 overview
Apache httpd 2.4 overviewApache httpd 2.4 overview
Apache httpd 2.4 overview
Jim Jagielski
 
WebSocket protocol
WebSocket protocolWebSocket protocol
WebSocket protocol
Kensaku Komatsu
 
ppt tips
ppt tipsppt tips
ppt tips
muniinb4u
 
Not your daddy's web server
Not your daddy's web serverNot your daddy's web server
Not your daddy's web server
Jim Jagielski
 
HTTP/2 and a Faster Web
HTTP/2 and a Faster WebHTTP/2 and a Faster Web
HTTP/2 and a Faster Web
C4Media
 
Velocity 2012 - Taming the Mobile Beast
Velocity 2012 - Taming the Mobile BeastVelocity 2012 - Taming the Mobile Beast
Velocity 2012 - Taming the Mobile Beast
Patrick Meenan
 
Building great mobile apps: Somethings you might want to know
Building great mobile apps: Somethings you might want to knowBuilding great mobile apps: Somethings you might want to know
Building great mobile apps: Somethings you might want to know
shwetank
 

What's hot (14)

WebSocket Perspectives and Vision for the Future
WebSocket Perspectives and Vision for the FutureWebSocket Perspectives and Vision for the Future
WebSocket Perspectives and Vision for the Future
 
Apache httpd 2.4 Reverse Proxy: The Hidden Gem
Apache httpd 2.4 Reverse Proxy: The Hidden GemApache httpd 2.4 Reverse Proxy: The Hidden Gem
Apache httpd 2.4 Reverse Proxy: The Hidden Gem
 
Real Life WebSocket Case Studies and Demos
Real Life WebSocket Case Studies and DemosReal Life WebSocket Case Studies and Demos
Real Life WebSocket Case Studies and Demos
 
Velocity 2012: The 90-Minute Mobile Optimization Life Cycle
Velocity 2012: The 90-Minute Mobile Optimization Life CycleVelocity 2012: The 90-Minute Mobile Optimization Life Cycle
Velocity 2012: The 90-Minute Mobile Optimization Life Cycle
 
Apache httpd Reverse Proxy and Tomcat
Apache httpd Reverse Proxy and TomcatApache httpd Reverse Proxy and Tomcat
Apache httpd Reverse Proxy and Tomcat
 
Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015
Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015
Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015
 
What's New and Newer in Apache httpd-24
What's New and Newer in Apache httpd-24What's New and Newer in Apache httpd-24
What's New and Newer in Apache httpd-24
 
Apache httpd 2.4 overview
Apache httpd 2.4 overviewApache httpd 2.4 overview
Apache httpd 2.4 overview
 
WebSocket protocol
WebSocket protocolWebSocket protocol
WebSocket protocol
 
ppt tips
ppt tipsppt tips
ppt tips
 
Not your daddy's web server
Not your daddy's web serverNot your daddy's web server
Not your daddy's web server
 
HTTP/2 and a Faster Web
HTTP/2 and a Faster WebHTTP/2 and a Faster Web
HTTP/2 and a Faster Web
 
Velocity 2012 - Taming the Mobile Beast
Velocity 2012 - Taming the Mobile BeastVelocity 2012 - Taming the Mobile Beast
Velocity 2012 - Taming the Mobile Beast
 
Building great mobile apps: Somethings you might want to know
Building great mobile apps: Somethings you might want to knowBuilding great mobile apps: Somethings you might want to know
Building great mobile apps: Somethings you might want to know
 

Viewers also liked

MGD Html5 pres fr
MGD Html5 pres frMGD Html5 pres fr
MGD Html5 pres fr
Moroccan game developers
 
Mi Iv 200 A Eleve Copy
Mi Iv 200 A Eleve CopyMi Iv 200 A Eleve Copy
Mi Iv 200 A Eleve Copy
youri59490
 
Le Vaccin De La Conspiration
Le Vaccin De La ConspirationLe Vaccin De La Conspiration
Le Vaccin De La Conspiration
youri59490
 
Révision CHIMIE
Révision CHIMIERévision CHIMIE
Révision CHIMIE
Jean-Philippe Lehoux
 
Oscaro - Conseils mecaniques - émetteur et récepteur
Oscaro - Conseils mecaniques -  émetteur et récepteurOscaro - Conseils mecaniques -  émetteur et récepteur
Oscaro - Conseils mecaniques - émetteur et récepteur
Oscaro
 
Adobe flash platform java
Adobe flash platform javaAdobe flash platform java
Adobe flash platform java
Ch'ti JUG
 
Spring 3.1
Spring 3.1Spring 3.1
Spring 3.1
Ch'ti JUG
 
AOSOIT_2017
AOSOIT_2017AOSOIT_2017
AOSOIT_2017
Kelvin Wong
 

Viewers also liked (8)

MGD Html5 pres fr
MGD Html5 pres frMGD Html5 pres fr
MGD Html5 pres fr
 
Mi Iv 200 A Eleve Copy
Mi Iv 200 A Eleve CopyMi Iv 200 A Eleve Copy
Mi Iv 200 A Eleve Copy
 
Le Vaccin De La Conspiration
Le Vaccin De La ConspirationLe Vaccin De La Conspiration
Le Vaccin De La Conspiration
 
Révision CHIMIE
Révision CHIMIERévision CHIMIE
Révision CHIMIE
 
Oscaro - Conseils mecaniques - émetteur et récepteur
Oscaro - Conseils mecaniques -  émetteur et récepteurOscaro - Conseils mecaniques -  émetteur et récepteur
Oscaro - Conseils mecaniques - émetteur et récepteur
 
Adobe flash platform java
Adobe flash platform javaAdobe flash platform java
Adobe flash platform java
 
Spring 3.1
Spring 3.1Spring 3.1
Spring 3.1
 
AOSOIT_2017
AOSOIT_2017AOSOIT_2017
AOSOIT_2017
 

Similar to HTML5 ADEO

Html5 web sockets - Brad Drysdale - London Web 2011-10-20
Html5 web sockets - Brad Drysdale - London Web 2011-10-20Html5 web sockets - Brad Drysdale - London Web 2011-10-20
Html5 web sockets - Brad Drysdale - London Web 2011-10-20
Nathan O'Hanlon
 
Developing Revolutionary Web Applications using Comet and Ajax Push
Developing Revolutionary Web Applications using Comet and Ajax PushDeveloping Revolutionary Web Applications using Comet and Ajax Push
Developing Revolutionary Web Applications using Comet and Ajax Push
Doris Chen
 
Camelone-2012 HTML5 WebSocket ActiveMQ/Camel
Camelone-2012 HTML5 WebSocket ActiveMQ/CamelCamelone-2012 HTML5 WebSocket ActiveMQ/Camel
Camelone-2012 HTML5 WebSocket ActiveMQ/Camel
Charles Moulliard
 
What's new in web standards?
What's new in web standards?What's new in web standards?
What's new in web standards?
Daniel Appelquist
 
Introduction to SignalR
Introduction to SignalRIntroduction to SignalR
Introduction to SignalR
Adam Mokan
 
Iot in-production
Iot in-productionIot in-production
Iot in-production
Florian Raschbichler
 
The Web, After HTML5
The Web, After HTML5The Web, After HTML5
The Web, After HTML5
Jonathan Jeon
 
Building real time applications with Symfony2
Building real time applications with Symfony2Building real time applications with Symfony2
Building real time applications with Symfony2
Antonio Peric-Mazar
 
HiveMQ + Kafka: The ideal solution for IoT MQTT data integration
HiveMQ + Kafka: The ideal solution for IoT MQTT data integrationHiveMQ + Kafka: The ideal solution for IoT MQTT data integration
HiveMQ + Kafka: The ideal solution for IoT MQTT data integration
MargarethaErber
 
Web sockets - Pentesting
Web sockets - Pentesting Web sockets - Pentesting
Web sockets - Pentesting
Vandana Verma
 
Next generation web protocols
Next generation web protocolsNext generation web protocols
Next generation web protocols
Daniel Austin
 
Cleaning Up the Dirt of the Nineties - How New Protocols are Modernizing the Web
Cleaning Up the Dirt of the Nineties - How New Protocols are Modernizing the WebCleaning Up the Dirt of the Nineties - How New Protocols are Modernizing the Web
Cleaning Up the Dirt of the Nineties - How New Protocols are Modernizing the Web
Steffen Gebert
 
Brushing skills on SignalR for ASP.NET developers
Brushing skills on SignalR for ASP.NET developersBrushing skills on SignalR for ASP.NET developers
Brushing skills on SignalR for ASP.NET developers
ONE BCG
 
Comet: Making The Web a 2-Way Medium
Comet: Making The Web a 2-Way MediumComet: Making The Web a 2-Way Medium
Comet: Making The Web a 2-Way Medium
Joe Walker
 
Back to Basics: An Introduction to MQTT
Back to Basics: An Introduction to MQTTBack to Basics: An Introduction to MQTT
Back to Basics: An Introduction to MQTT
HiveMQ
 
SPDY Talk
SPDY TalkSPDY Talk
SPDY Talk
Bojan Babic
 
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
Peter Lubbers
 
PLNOG 13: Bart Salaets: Optimising TCP in today’s changing network environment
PLNOG 13: Bart Salaets: Optimising TCP in today’s changing network environmentPLNOG 13: Bart Salaets: Optimising TCP in today’s changing network environment
PLNOG 13: Bart Salaets: Optimising TCP in today’s changing network environment
PROIDEA
 
.NET Conf 2022 - Networking in .NET 7
.NET Conf 2022 - Networking in .NET 7.NET Conf 2022 - Networking in .NET 7
.NET Conf 2022 - Networking in .NET 7
Karel Zikmund
 
Bluetube
BluetubeBluetube
Bluetube
Vinoth Chandar
 

Similar to HTML5 ADEO (20)

Html5 web sockets - Brad Drysdale - London Web 2011-10-20
Html5 web sockets - Brad Drysdale - London Web 2011-10-20Html5 web sockets - Brad Drysdale - London Web 2011-10-20
Html5 web sockets - Brad Drysdale - London Web 2011-10-20
 
Developing Revolutionary Web Applications using Comet and Ajax Push
Developing Revolutionary Web Applications using Comet and Ajax PushDeveloping Revolutionary Web Applications using Comet and Ajax Push
Developing Revolutionary Web Applications using Comet and Ajax Push
 
Camelone-2012 HTML5 WebSocket ActiveMQ/Camel
Camelone-2012 HTML5 WebSocket ActiveMQ/CamelCamelone-2012 HTML5 WebSocket ActiveMQ/Camel
Camelone-2012 HTML5 WebSocket ActiveMQ/Camel
 
What's new in web standards?
What's new in web standards?What's new in web standards?
What's new in web standards?
 
Introduction to SignalR
Introduction to SignalRIntroduction to SignalR
Introduction to SignalR
 
Iot in-production
Iot in-productionIot in-production
Iot in-production
 
The Web, After HTML5
The Web, After HTML5The Web, After HTML5
The Web, After HTML5
 
Building real time applications with Symfony2
Building real time applications with Symfony2Building real time applications with Symfony2
Building real time applications with Symfony2
 
HiveMQ + Kafka: The ideal solution for IoT MQTT data integration
HiveMQ + Kafka: The ideal solution for IoT MQTT data integrationHiveMQ + Kafka: The ideal solution for IoT MQTT data integration
HiveMQ + Kafka: The ideal solution for IoT MQTT data integration
 
Web sockets - Pentesting
Web sockets - Pentesting Web sockets - Pentesting
Web sockets - Pentesting
 
Next generation web protocols
Next generation web protocolsNext generation web protocols
Next generation web protocols
 
Cleaning Up the Dirt of the Nineties - How New Protocols are Modernizing the Web
Cleaning Up the Dirt of the Nineties - How New Protocols are Modernizing the WebCleaning Up the Dirt of the Nineties - How New Protocols are Modernizing the Web
Cleaning Up the Dirt of the Nineties - How New Protocols are Modernizing the Web
 
Brushing skills on SignalR for ASP.NET developers
Brushing skills on SignalR for ASP.NET developersBrushing skills on SignalR for ASP.NET developers
Brushing skills on SignalR for ASP.NET developers
 
Comet: Making The Web a 2-Way Medium
Comet: Making The Web a 2-Way MediumComet: Making The Web a 2-Way Medium
Comet: Making The Web a 2-Way Medium
 
Back to Basics: An Introduction to MQTT
Back to Basics: An Introduction to MQTTBack to Basics: An Introduction to MQTT
Back to Basics: An Introduction to MQTT
 
SPDY Talk
SPDY TalkSPDY Talk
SPDY Talk
 
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
 
PLNOG 13: Bart Salaets: Optimising TCP in today’s changing network environment
PLNOG 13: Bart Salaets: Optimising TCP in today’s changing network environmentPLNOG 13: Bart Salaets: Optimising TCP in today’s changing network environment
PLNOG 13: Bart Salaets: Optimising TCP in today’s changing network environment
 
.NET Conf 2022 - Networking in .NET 7
.NET Conf 2022 - Networking in .NET 7.NET Conf 2022 - Networking in .NET 7
.NET Conf 2022 - Networking in .NET 7
 
Bluetube
BluetubeBluetube
Bluetube
 

More from Ch'ti JUG

Java 8 : Un ch'ti peu de lambda
Java 8 : Un ch'ti peu de lambdaJava 8 : Un ch'ti peu de lambda
Java 8 : Un ch'ti peu de lambda
Ch'ti JUG
 
Bonita Open Solution
Bonita Open SolutionBonita Open Solution
Bonita Open Solution
Ch'ti JUG
 
MC3SI Chti Jug Soiree Agilite
MC3SI Chti Jug Soiree AgiliteMC3SI Chti Jug Soiree Agilite
MC3SI Chti Jug Soiree Agilite
Ch'ti JUG
 
Chti Jug Octo 16032010 Réduisons le ticket d’entrée de nos projets
Chti Jug Octo 16032010 Réduisons le ticket d’entrée de nos projetsChti Jug Octo 16032010 Réduisons le ticket d’entrée de nos projets
Chti Jug Octo 16032010 Réduisons le ticket d’entrée de nos projets
Ch'ti JUG
 
GlassFish ESB Ch'ti JUG
GlassFish ESB Ch'ti JUGGlassFish ESB Ch'ti JUG
GlassFish ESB Ch'ti JUG
Ch'ti JUG
 
Drools Planner Chtijug 2010
Drools Planner Chtijug 2010Drools Planner Chtijug 2010
Drools Planner Chtijug 2010
Ch'ti JUG
 
Lille2010markp
Lille2010markpLille2010markp
Lille2010markp
Ch'ti JUG
 
Terracotta Ch'ti Jug
Terracotta Ch'ti JugTerracotta Ch'ti Jug
Terracotta Ch'ti Jug
Ch'ti JUG
 

More from Ch'ti JUG (8)

Java 8 : Un ch'ti peu de lambda
Java 8 : Un ch'ti peu de lambdaJava 8 : Un ch'ti peu de lambda
Java 8 : Un ch'ti peu de lambda
 
Bonita Open Solution
Bonita Open SolutionBonita Open Solution
Bonita Open Solution
 
MC3SI Chti Jug Soiree Agilite
MC3SI Chti Jug Soiree AgiliteMC3SI Chti Jug Soiree Agilite
MC3SI Chti Jug Soiree Agilite
 
Chti Jug Octo 16032010 Réduisons le ticket d’entrée de nos projets
Chti Jug Octo 16032010 Réduisons le ticket d’entrée de nos projetsChti Jug Octo 16032010 Réduisons le ticket d’entrée de nos projets
Chti Jug Octo 16032010 Réduisons le ticket d’entrée de nos projets
 
GlassFish ESB Ch'ti JUG
GlassFish ESB Ch'ti JUGGlassFish ESB Ch'ti JUG
GlassFish ESB Ch'ti JUG
 
Drools Planner Chtijug 2010
Drools Planner Chtijug 2010Drools Planner Chtijug 2010
Drools Planner Chtijug 2010
 
Lille2010markp
Lille2010markpLille2010markp
Lille2010markp
 
Terracotta Ch'ti Jug
Terracotta Ch'ti JugTerracotta Ch'ti Jug
Terracotta Ch'ti Jug
 

Recently uploaded

leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
moinahousna
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
Ivanti
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
digitalxplive
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Pigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending PlantPigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending Plant
LINUS PROJECTS (INDIA)
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 

Recently uploaded (20)

leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Pigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending PlantPigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending Plant
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 

HTML5 ADEO

  • 1. Ch’ti JUG HTML5 Communication Building Real-Time Applications with HTML5 Web Sockets Ch'ti Java User Group http://chtijug.org/ Peter Lubbers, Kaazing 10 December 2009 Copyright © Kaazing—License Creative Commons 2.0 France
  • 3. Ch’ti JUG Qui C’est Ce Mec? Peter Lubbers • Director of documentation and training at Kaazing • Skills Matter and Zenika HTML5 training courses • Co-author Apress Book Pro HTML5 Programming (Spring 2010) • Ultramarathon runner, blogger runlaketahoe.blogspot.com Copyright © Kaazing—License Creative Commons 2.0 France
  • 4. Ch’ti JUG Agenda • Introduction • History of the real-time Web • WebSocket and Server-Sent Events • Cross-Document Messaging and XHR Level 2 • Beyond WebSocket • Questions? Copyright © Kaazing—License Creative Commons 2.0 France
  • 5. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 6. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 7. Ch’ti JUG Today’s Requirements • Today’s Web applications demand reliable, real-time communications with near-zero latency • Examples: • Financial applications • Social networking applications • Online games • Smart power grid Copyright © Kaazing—License Creative Commons 2.0 France
  • 8. Ch’ti JUG HTTP Limitations • Until now, this has been cumbersome to achieve, primarily due to the limitations of HTTP • HTTP is half-duplex (traffic flows in only one direction at a time) • HTTP is a stateless, request-driven protocol Copyright © Kaazing—License Creative Commons 2.0 France
  • 9. Ch’ti JUG HTTP Limitations • Header information is sent with each HTTP request and response, which can be an unnecessary overhead • After a response is sent, the server may choose to close the socket • Rich Internet Applications (with Ajax, Comet, Silverlight, and Flash) are becoming richer, but still limited by HTTP Copyright © Kaazing—License Creative Commons 2.0 France
  • 10. Ch’ti JUG Ajax and Comet • Ajax (Asynchronous JavaScript and XML) is a technique for building highly interactive applications for the Web • Content can change without loading the entire page • Ajax Delivers: • User-perceived low latency • Single page • “Real-time” often achieved through polling and long-polling (Comet) Copyright © Kaazing—License Creative Commons 2.0 France
  • 11. Ch’ti JUG Polling • Polling is “nearly real-time” • Sometimes used in Ajax applications to simulate real-time communication • Browser sends HTTP requests at regular intervals and immediately receives a response Copyright © Kaazing—License Creative Commons 2.0 France
  • 12. Ch’ti JUG Polling Architecture Copyright © Kaazing—License Creative Commons 2.0 France
  • 13. Ch’ti JUG Long Polling • Also known as asynchronous-polling • Browser sends a request to the server and the server keeps the request open for a set period. • HTTP headers, present in both long- polling and polling often account for more than half of the network traffic. Copyright © Kaazing—License Creative Commons 2.0 France
  • 14. Ch’ti JUG Long Polling Architecture Copyright © Kaazing—License Creative Commons 2.0 France
  • 15. Ch’ti JUG Streaming • More Efficient, but still not perfect • Possible complications: • Proxies and Firewalls • Response builds up and must be flushed periodically • Cross-domain issues to do with browser connection limits Copyright © Kaazing—License Creative Commons 2.0 France
  • 16. Ch’ti JUG Half-Duplex Architecture Copyright © Kaazing—License Creative Commons 2.0 France
  • 17. Ch’ti JUG Streaming Architecture Copyright © Kaazing—License Creative Commons 2.0 France
  • 18. Ch’ti JUG Current Approaches Are… Fake Time! Or: Not Really Time Copyright © Kaazing—License Creative Commons 2.0 France
  • 19. Ch’ti JUG Example of Polling in Action Copyright © Kaazing—License Creative Commons 2.0 France
  • 20. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 21. Ch’ti JUG HTTP Header Overhead Copyright © Kaazing—License Creative Commons 2.0 France
  • 22. Ch’ti JUG Example HTTP Request GET /PollingStock//PollingStock HTTP/1.1 Host: localhost:8080 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*; q=0.8 Accept-Language: en-us Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http://localhost:8080/PollingStock/ Cookie: showInheritedConstant=false; showInheritedProtectedConstant=false; showInheritedProperty=false; showInheritedProtectedProperty=false; showInheritedMethod=false; showInheritedProtectedMethod=false; showInheritedEvent=false; showInheritedStyle=false; showInheritedEffect=false Copyright © Kaazing—License Creative Commons 2.0 France
  • 23. Ch’ti JUG Example HTTP Response HTTP/1.x 200 OK X-Powered-By: Servlet/2.5 Server: Sun Java System Application Server 9.1_02 Content-Type: text/html;charset=UTF-8 Content-Length: 321 Date: Sat, 07 Nov 2009 00:32:46 GMT Copyright © Kaazing—License Creative Commons 2.0 France
  • 24. Ch’ti JUG HTTP Header Traffic Analysis • Example network throughput for Polling HTTP request and response headers: • Use case A: 10,000 clients polling every 60 seconds: • Network throughput is (871 x 10,000)/60 = 145,166 bytes = 1,161,328 bits per second (1.1 Mbps) • Use case B: 10,000 clients polling every second: • Network throughput is (871 x 10,000) = 8,710,000 bytes = 69,680,000 bits per second (66 Mbps) • Use case C: 100,000 clients polling every 10 seconds: • Network throughput is (871 x 100,000)/10 = 8710000 bytes = 69,680,000 bits per second (66 Mbps) Copyright © Kaazing—License Creative Commons 2.0 France
  • 25. Ch’ti JUG Network Throughput Comparison Copyright © Kaazing—License Creative Commons 2.0 France
  • 26. Ch’ti JUG Technology-Specific Problems • AJAX • Enables clients to asynchronously poll for server-side events (at best) • Polling leads to poor resource utilization on both the client and server • Comet • Lack of a standard implementation • Often requires complex techniques such as multiplexing or managing multiple domains Copyright © Kaazing—License Creative Commons 2.0 France
  • 27. Ch’ti JUG Headache 2.0 Copyright © Kaazing—License Creative Commons 2.0 France
  • 28. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 29. Ch’ti JUG Desktop vs. Browser • Desktop Networking • Full-duplex bidirectional TCP sockets • Access any server on the network • Browser Networking • Half-duplex HTTP request-response • HTTP polling, long polling fraught with problems Copyright © Kaazing—License Creative Commons 2.0 France
  • 30. Ch’ti JUG Desktop Architecture Copyright © Kaazing—License Creative Commons 2.0 France
  • 31. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 32. Ch’ti JUG About HTML5 • HTML5 is the next set of W3C HTML standards • It offers new and enhanced features to address new HTML primitives, multimedia, offline use, communication, and so on • Many of the browser vendors have already implemented several of these features Copyright © Kaazing—License Creative Commons 2.0 France
  • 33. Ch’ti JUG HTML5 Features • HTML5 includes a wide range of new features, including: • Canvas • Workers • Geolocation • New form elements • Offline storage • Communication APIs • And more… Copyright © Kaazing—License Creative Commons 2.0 France
  • 34. Ch’ti JUG HTML5 Communication • WebSocket • Proxy/Firewall-friendly text socket for browsers • Server-Sent Events • Standardized HTTP streaming (downstream) • XMLHttpRequest Level 2 • Cross-origin XMLHttpRequest • Cross Document Messaging • Secure inter-window (iframe) communication Copyright © Kaazing—License Creative Commons 2.0 France
  • 35. Ch’ti JUG Part of the HTML5 Spec? • Web Sockets—like other pieces of the HTML5 effort such as Local Storage and Geolocation—was originally part of the HTML5 specification • Moved to a separate standards document to keep the specification focused • Web Sockets has been submitted to the Internet Engineering Task Force (IETF) by its creators, the WHATWG Copyright © Kaazing—License Creative Commons 2.0 France
  • 36. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 37. Ch’ti JUG HTML5 WebSockets • HTTP-friendly TCP for the browser with minimal framing • Full-duplex bidirectional communication • Operates over a single socket • Distributed client-server architecture • No browser plug-ins • Traverses proxies and firewalls seamlessly • Allows authorized cross-origin communication Copyright © Kaazing—License Creative Commons 2.0 France
  • 38. Ch’ti JUG WebSocket Architecture Copyright © Kaazing—License Creative Commons 2.0 France
  • 39. Ch’ti JUG HTML5 WebSockets • Connection established by upgrading from the HTTP protocol to the WebSocket protocol using the same TCP connection • WebSocket data frames can be sent back and forth between the client and the server in full-duplex mode Copyright © Kaazing—License Creative Commons 2.0 France
  • 40. Ch’ti JUG HTML5 WebSocket Schemes • WebSocket ws://www.websocket.org/text • WebSocket Secure wss://www.websocket.org/encrypted-text Copyright © Kaazing—License Creative Commons 2.0 France
  • 41. Ch’ti JUG HTML5 WebSocket Handshake GET /text HTTP/1.1rn Upgrade: WebSocketrn Connection: Upgradern Host: www.websocket.orgrn …rn HTTP/1.1 101 WebSocket Protocol Handshakern Upgrade: WebSocketrn Connection: Upgradern …rn Copyright © Kaazing—License Creative Commons 2.0 France
  • 42. Ch’ti JUG HTML5 WebSocket Frames • Text and binary frames can be sent full-duplex, in either direction at any the same time • Each frame of data: • Starts with a 0x00 byte • Ends with a 0xFF byte • Contains UTF-8 data in between • Text Frames use terminator • x00Hello, WebSocket0xff • Binary Frames use length prefix: • x000x10Hello, WebSocket • There is no defined maximum size • If the user agent has content that is too large to be handled, it must fail the Web Socket connection • JavaScript does not allow >4GB of data, so that is a practical maximum Copyright © Kaazing—License Creative Commons 2.0 France
  • 43. Ch’ti JUG Drastic Reduction in Network Traffic • With WebSocket, each frame has only 2 bytes of packaging (compare almost 500:1 or even 1000:1) • No latency involved in establishing new TCP connections for each HTTP message • Remember the Polling HTTP header traffic (66 Mbps network throughput for headers alone)? Copyright © Kaazing—License Creative Commons 2.0 France
  • 44. Ch’ti JUG HTTP Header Traffic Analysis • Example network throughput for WebSocket HTTP request and response headers: • Use case A: 10,000 frames every 60 seconds: • Network throughput is (2 x 10,000)/60 = 333 bytes = 2,664 bits per second (2.6 Kbps) • Use case B: 10,000 frames every second: • Network throughput is (2 x 10,000) = 20,000 bytes = 160,000 bits per second (156 Kbps) • Use case C: 100,000 frames every 10 seconds: • Network throughput is (2 x 100,000)/10 = 20,000 bytes = 160,000 bits per second (156 Kbps) Copyright © Kaazing—License Creative Commons 2.0 France
  • 45. Ch’ti JUG Network Throughput Comparison Copyright © Kaazing—License Creative Commons 2.0 France
  • 46. Ch’ti JUG Overheard… "Reducing kilobytes of data to 2 bytes…and reducing latency from 150ms to 50ms is far more than marginal. In fact, these two factors alone are enough to make WebSocket seriously interesting to Google.“ —Ian Hickson (Google, HTML5 spec lead) Copyright © Kaazing—License Creative Commons 2.0 France
  • 47. Ch’ti JUG HTML5 WebSockets API • Creating a WebSocket instance: var myWebSocket = new WebSocket (“ws://www.websocket.org”); Copyright © Kaazing—License Creative Commons 2.0 France
  • 48. Ch’ti JUG HTML5 WebSockets API • Associating listeners myWebSocket.onopen = function(evt) { alert(“Connection open ...”); }; myWebSocket.onmessage = function(evt) { alert( “Received Message: ” + evt.data); }; myWebSocket.onclose = function(evt) { alert(“Connection closed.”); }; Copyright © Kaazing—License Creative Commons 2.0 France
  • 49. Ch’ti JUG HTML5 WebSockets API • Sending messages myWebSocket.send(“Hello WebSocket!”); myWebSocket.close(); Copyright © Kaazing—License Creative Commons 2.0 France
  • 50. Ch’ti JUG Browser Support • Chromium support added just a few weeks ago (nightly builds) • Webkit activity Copyright © Kaazing—License Creative Commons 2.0 France
  • 51. Ch’ti JUG Native WebSocket in Chromium : Copyright © Kaazing—License Creative Commons 2.0 France
  • 52. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 53. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 54. Ch’ti JUG HTML5 Server-Sent Events • Standardizes and formalizes how a continuous stream of data can be sent from a server to a browser • Introduces EventSource—a new JavaScript API Copyright © Kaazing—License Creative Commons 2.0 France
  • 55. Ch’ti JUG SSE Architecture Copyright © Kaazing—License Creative Commons 2.0 France
  • 56. Ch’ti JUG EventSource API • Connects to a server URL to receive an event stream: var stream = new EventSource("http://news.kaazing.com"); • Set event handlers: stream.onopen = function() { alert(“open”); } stream.onmessage = function(event) { alert(“message: “ + event.data); } stream.onerror = function() { alert(“error”); } Copyright © Kaazing—License Creative Commons 2.0 France
  • 57. Ch’ti JUG Browser Support • Partial support in Opera 9+ • Development in Firefox trunk Copyright © Kaazing—License Creative Commons 2.0 France
  • 58. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 59. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 60. Ch’ti JUG XMLHttpRequest Level 2 • XMLHttpRequest is the API that made Ajax possible • XMLHttpRequest Level 2 significantly enhances XMLHttpRequest • Improvements in the following areas: • Progress events • Cross-origin XMLHttpRequests Copyright © Kaazing—License Creative Commons 2.0 France
  • 61. Ch’ti JUG Progress Events • XMLHttpRequest Level 2 supports named progress events: • loadstart • progress • abort • error • load • loadend • readyState property and readystatechange events retained for backward compatibility Copyright © Kaazing—License Creative Commons 2.0 France
  • 62. Ch’ti JUG Progress Events • Progress events have fields for: • The total amount of data to transfer • The amount that has already transferred • Whether the total is known (Boolean value) • Example: crossOriginRequest.upload.onprogress = function(e) { var total = e.total; var loaded = e.loaded; if (e.lengthComputable) { // do something with the progress information } } Copyright © Kaazing—License Creative Commons 2.0 France
  • 63. Ch’ti JUG Cross-Origin XMLHttpRequest • XMLHttpRequest Level 2 allows for cross- origin XMLHttpRequests using Cross Origin Resource Sharing (CORS) http://www.w3.org/TR/access- control/ • Example: var crossOriginRequest = new XMLHttpRequest(); crossOriginRequest.open("GET", "http://www.example.net/stockfeed", true); Copyright © Kaazing—License Creative Commons 2.0 France
  • 64. Ch’ti JUG Origin Security • An origin is a subset of an address used for modeling trust relationships on the Web • Origins are made up of a scheme, a host, and a port—different origin: • https://www.example.com • http://www.example.com • The path is not considered in the origin value—same origin: • http://www.example.com/index.html • http://www.example.com/page2.html Copyright © Kaazing—License Creative Commons 2.0 France
  • 65. Ch’ti JUG Origin Security • Cross-origin communication identifies the sender by origin • Allows receiver to ignore messages from origins it does not trust or does not expect to receive messages from (white list) • Applications must opt-in to receiving messages by adding an event listener for message events • No risk of messages interfering with an unsuspecting application Copyright © Kaazing—License Creative Commons 2.0 France
  • 66. Ch’ti JUG Preflight Requests • For sensitive actions (for example, a request with credentials, or a request other than GET or POST), an OPTIONS preflight request is sent to the server to see if the action is supported and allowed • Successful communication may require a CORS-capable server Copyright © Kaazing—License Creative Commons 2.0 France
  • 67. Ch’ti JUG Cross-Origin HTTP Headers • A cross-origin exchange between a page hosted on www.example.com and a service hosted on www.example.net (Request): POST /main HTTP/1.1 Host: www.example.net User-Agent: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1.3) Gecko/20090910 Ubuntu/9.04 (jaunty) Shiretoko/3.5.3 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http://www.example.com/ Origin: http://www.example.com Pragma: no-cache Cache-Control: no-cache Content-Length: 0 Copyright © Kaazing—License Creative Commons 2.0 France
  • 68. Ch’ti JUG Cross-Origin HTTP Headers • Cross-origin exchange between a page hosted on www.example.com and a service hosted on www.example.net (Response): HTTP/1.1 201 Created Transfer-Encoding: chunked Server: Kaazing Gateway Date: Mon, 02 Nov 2009 06:55:08 GMT Content-Type: text/plain Access-Control-Allow-Origin: http://www.example.com Access-Control-Allow-Credentials: true Copyright © Kaazing—License Creative Commons 2.0 France
  • 69. Ch’ti JUG Cross-Origin XMLHttpRequest • Allows you to build web applications that use services hosted on different origins • For example, a web application that used static content from one origin and Ajax services from another • Allows client-side aggregation (the ultimate mashup) Copyright © Kaazing—License Creative Commons 2.0 France
  • 70. Ch’ti JUG Client-Side Aggregation Copyright © Kaazing—License Creative Commons 2.0 France
  • 71. Ch’ti JUG Browser Support • Latest versions of • Firefox • Chrome • Safari Copyright © Kaazing—License Creative Commons 2.0 France
  • 72. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 73. Ch’ti JUG Cross Document Messaging • Enables secure cross-origin communication across iframes, tabs, and windows (using origin security) • Defines the PostMessage API as a standard way to send messages • Provides asynchronous message passing between JavaScript contexts Copyright © Kaazing—License Creative Commons 2.0 France
  • 74. Ch’ti JUG Cross Document Messaging • Can be accomplished by direct scripting (a script running in one page tries to manipulate another document), but may not be allowed due to security restrictions Copyright © Kaazing—License Creative Commons 2.0 France
  • 75. Ch’ti JUG PostMessage Overview Copyright © Kaazing—License Creative Commons 2.0 France
  • 76. Ch’ti JUG HTML5 PostMessage • Allows you to communicate between documents served by different origins • Also handy for same-origin messaging, because it provides a consistent, easy to use API (for example, HTML5 Web Workers) Copyright © Kaazing—License Creative Commons 2.0 France
  • 77. Ch’ti JUG HTML5 PostMessage • Sending a message: myFrame.contentWindow.postMessage ('Hello, world', 'http://www.example.com/'); Copyright © Kaazing—License Creative Commons 2.0 France
  • 78. Ch’ti JUG HTML5 PostMessage • Listening for messages: window.addEventListener(“message”, messageHandler, true); function messageHandler(e) { switch(e.origin) { case “friend.example.com”: // process message processMessage(e.data); break; default: // message origin not recognized // ignoring message } } Copyright © Kaazing—License Creative Commons 2.0 France
  • 79. Ch’ti JUG Browser Support • Firefox 3.5 and greater • Safari 4.0 and greater • Chrome 2.0 and greater • Opera 9.6 and greater • Internet Explorer 8 (supports cross-frame but not cross-window messaging) Copyright © Kaazing—License Creative Commons 2.0 France
  • 80. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 81. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 82. Ch’ti JUG Extending HTML5 WebSockets • Once you have a bi-directional, full- duplex socket connection, you can do all kinds of great things in a browser • Any TCP-based protocol works over WebSocket • JMS, AMQP, STOMP, XMPP, IMAP, AMQP, IRC, and more • Custom Protocols • Binary Protocols • Encode Binary as Text Copyright © Kaazing—License Creative Commons 2.0 France
  • 83. Ch’ti JUG Stomp Example • Streaming Text Oriented Messaging Protocol • Connect to a message broker to publish and subscribe to channels and topics • Example message brokers that support Stomp: • RabbitMQ • ActiveMQ • More Copyright © Kaazing—License Creative Commons 2.0 France
  • 84. Ch’ti JUG Stomp Protocol Stomp commands Server frames • ABORT • ERROR • ACK • MESSAGE • BEGIN • RECEIPT • COMMIT • CONNECT Example Stomp frame: • DISCONNECT CONNECTn • SEND login: <username>n • SUBSCRIBE passcode:<passcode>n • UNSUBSCRIBE n ^@ Copyright © Kaazing—License Creative Commons 2.0 France
  • 85. Ch’ti JUG Example Stomp Client • Stomp Client var myStomp = new StompClient(); myStomp.onopen = function(headers) { myStomp.subscribe(“/topic/destination”); } myStomp.onmessage = function(headers, body) { alert(body); } myStomp.connect(“ws://www.websocket.org/stomp”); myStomp.send(“Hello STOMP!”, “/topic/destination”); Copyright © Kaazing—License Creative Commons 2.0 France
  • 86. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 87. Ch’ti JUG Kaazing WebSocket Gateway • Enterprise Grade WebSocket server • Seamlessly and reliably extends any TCP- based business messaging protocol to the Web with ultra high performance and minimal latency • Requires no third-party browser plug-in or client-side installation • Provides emulation for older browsers so you can code against the new standards today Copyright © Kaazing—License Creative Commons 2.0 France
  • 88. Ch’ti JUG Browser Certification • Supports native HTML 5 Communications (when available) as well as emulation for current browsers • Certified Browser Versions: • Apple Safari 3.0+ • Google Chrome 1.0+ • Microsoft Internet Explorer 5.5+ • Mozilla Firefox 1.5+ • Opera 9.5+ Copyright © Kaazing—License Creative Commons 2.0 France
  • 89. Ch’ti JUG Client Libraries • Stomp and the Stomp-JMS Adapter • AMQP • XMPP (Jabber) • IRC • Darkstar • More added all the time Copyright © Kaazing—License Creative Commons 2.0 France
  • 90. Ch’ti JUG Client Library Technologies • JavaScript • Adobe Flex (Flash) • Microsoft Silverlight (Kaazing is a Microsoft Silverlight partner) • Java and JavaFX (Kaazing is a Sun Microsystems partner) Copyright © Kaazing—License Creative Commons 2.0 France
  • 91. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 92. Ch’ti JUG Financial Applications Copyright © Kaazing—License Creative Commons 2.0 France
  • 93. Ch’ti JUG Financial Applications Copyright © Kaazing—License Creative Commons 2.0 France
  • 94. Ch’ti JUG Earth Control Game http://apps.facebook.com/earthcontrol Copyright © Kaazing—License Creative Commons 2.0 France
  • 95. Ch’ti JUG Chess Vegas http://www.chessvegas.com/ Copyright © Kaazing—License Creative Commons 2.0 France
  • 96. Ch’ti JUG Degony Game http://www.degony.com Copyright © Kaazing—License Creative Commons 2.0 France
  • 97. Ch’ti JUG Important Links • Kaazing Website: www.kaazing.com • Kaazing Technology Network: http://tech.kaazing.com/ • Download Kaazing WebSocket Gateway: http://www.kaazing.com/download • “When can I use” site: http://a.deveria.com/caniuse/ • Skills Matter: www.skillsmatter.com • Zenika: http://www.zenika.com Copyright © Kaazing—License Creative Commons 2.0 France
  • 98. Ch’ti JUG Copyright © Kaazing—License Creative Commons 2.0 France
  • 99. Ch’ti JUG Question 1 Win a jQuery book Copyright © Kaazing—License Creative Commons 2.0 France
  • 100. Ch’ti JUG What does “Stomp” stand for? Copyright © Kaazing—License Creative Commons 2.0 France
  • 101. Ch’ti JUG Question 2 Win a jetBrains license Copyright © Kaazing—License Creative Commons 2.0 France
  • 102. Ch’ti JUG Which browser supports WebSockets natively? Copyright © Kaazing—License Creative Commons 2.0 France
  • 103. Ch’ti JUG Raffle (Tombola) Win an iPod Touch Sponsored by: Copyright © Kaazing—License Creative Commons 2.0 France
  • 104. Ch’ti JUG Cocktail • Merci pour votre attention • Merci au Groupe ADEO pour son sponsoring Copyright © Kaazing—License Creative Commons 2.0 France
  • 105. Ch’ti JUG Licence • Les photos et logos appartiennent à leurs auteurs respectifs • Le contenu de la présentation est sous licence Creative Commons 2.0 France • Contrat Paternité • Pas d'Utilisation Commerciale • Partage des Conditions Initiales à l'Identique • http://creativecommons.org/licenses/by- nc-sa/2.0/fr/ Copyright © Kaazing—License Creative Commons 2.0 France

Editor's Notes

  1. Ajax: poor resource utilization, because CPU-cycles and memory are needlessly allocated to prematurely or belatedly detect updates on the serverComet: lack of standard implementationdue the varying levels of support provided by browser vendors for XHR and iFramesEven in long-polling, HTTP Headers in the response outweigh the message being delivered
  2. Desktop TCP (good performance)Request-Response (bad performance, poor bandwidth usage)Browser Polling, Long Polling, Streaming (limited real-time, proxy problems)Portals aggregating content at server (poor scalability)Mashupsaggregating at client for improved scalability – security problems
  3. WebSocket is text-only
  4. Authors, evangelists, and companies involved in the standardization still refer to the original set of features, including Web Sockets, as "HTML5."
  5. HTTP used for handshake onlyOperates over a single socketTraverses firewalls and routers seamlesslyAllows authorized cross-site communicationCookie-based authenticationExisting HTTP load balancersNavigates proxies using HTTP CONNECT, same technique as https, but without the encryption