Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

HTML 5 WebSockets - The Last Mile by zug10789

VIEWS: 21 PAGES: 38

									HTML 5 WebSockets –
The Last Mile

    Jonas Jacobi & John R. Fallows
    Founders
    Kaazing




                www.devoxx.com
Speaker’s qualifications
 John and Jonas are founders of Kaazing, provider of the
 open sourcre HTML 5 Websocket gateway
 Both dudes are frequent writers for magazines such as
 JDJ, JavaMagazine, and AjaxWorld
 John and Jonas speak frequently at conferences World
 Wide on HTML 5 Communication
 Authors of Pro JSF and Ajax: Building Rich Internet
 Components




  3
                           www.devoxx.com
Overall Presentation Goal

      Learn how to architect and build
     full-duplex Web applications using
           HTML 5 communication




                   www.devoxx.com
If we were not restricted by the traditional limitations of
 HTTP, what type of Web applications would we build?




                           www.devoxx.com
Agenda
 HTML 5 Overview
 Networking Review
 Today’s Architecture
 HTML 5 Server-Sent Events
 HTML 5 WebSockets
 Kaazing Gateway




  6
                        www.devoxx.com
HTML 5 Overview
 Next generation application platform
   Communication (sockets, cross-site)
   Graphics (2D)
   Drag ‘n’ drop
   Storage (transient, persistent)
   Offline
   Compatibility




                             www.devoxx.com
Networking Review
 Desktop Networking
   Full-duplex bidirectional TCP sockets
   Access any server on the network

 Browser Networking
   Half-duplex HTTP request-response
   HTTP polling, long polling, streaming
   Same-origin HTTP requests




                            www.devoxx.com
     Today’s Architecture
                                                           Java EE Container

                                                                       RMI -                            JDBC -
                                                                  TCP (Full Duplex)                 TCP (Full Duplex)         Database
                                                                                      EJB
                                    Application Transport Logic




                                                                                                        IMAP -
                                                                     RMI                            TCP (Full Duplex)
                                                                                 JavaMail                                 IMAP Server
                          Servlet




                                                                                                      JABBER -
                                                                                                    TCP (Full Duplex)
                                                                                                                              IM Server

              HTTP
                                                                                                                                             Custom -
Browser




          (Half Duplex)                                                                                  JMS -
                                                                     RMI                            TCP (Full Duplex)                     TCP (Full Duplex)
                                                                                      JMS                                                                      Stock




                                                                                                                               Trading
                                                                                                                                Client
                                                                                                                                Stock
                                                                                                                        JMS
                                                                                                                                                              Trading
                                                                                                                                                               Feed




                                                                                        www.devoxx.com
What’s Missing?
 No true bi-directional communication
   Comet/Reverse Ajax are non-standard one-way push

 No guaranteed message delivery
 Complex middle-tier architecture
   Adds unnecessary latency




                         www.devoxx.com
HTML 5 Communication
 WebSocket
   Proxy-friendly text socket for your browser

 Server-Sent Events
   Standardized HTTP streaming (downstream)

 Cross-Site XMLHttpRequest
   Secure cross-site remote communication

 postMessage
   Secure inter-iframe communication

                            www.devoxx.com
HTML 5 WebSockets
Provides Full-Duplex Text Socket
  Operates over a single socket

Traverses firewalls and routers seamlessly
Leverages cross-site access control
Integrates with:
  Cookie-based authentication
  Existing HTTP load balancers



                          www.devoxx.com
Full-duplex Architecture
                                                     RMI -                  Java EE          JDBC -
                                                TCP (Full Duplex)                        TCP (Full Duplex)
                                                                                 EJB

                                                     RMI -
                                                TCP (Full Duplex)
                                                                                 JMS                          Database
                            WebSocket Gateway

                                                             JDBC - TCP (Full Duplex)




                                                             IMAP - TCP (Full Duplex)
                                                                                                             IMAP Server


                                                            Jabber - TCP (Full Duplex)
                                                                                                              IM Server

           TCP over HTTP
            (Full Duplex)
 Browser




                                                           Custom - TCP (Full Duplex)                           Stock
                                                                                                               Trading
                                                                                                                Feed




                                                                www.devoxx.com
HTML 5 WebSocket Schemes

	 	   ws://www.kaazing.org/text


      wss://www.kaazing.org/encrypted-text




                   www.devoxx.com
HTML 5 WebSockets API
Creating a WebSocket instance:

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




                         www.devoxx.com
HTML 5 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.”); };




                         www.devoxx.com
HTML 5 WebSockets API
Sending messages:

myWebSocket.postMessage(“Hello WebSocket!”);
myWebSocket.postMessage(“Goodbye Comet!”);
myWebSocket.disconnect();




                      www.devoxx.com
HTML 5 WebSocket Handshake

   GET /text HTTP/1.1\r\n
    Upgrade: WebSocket\r\n
    Connection: Upgrade\r\n
    Host: www.kaazing.org\r\n
    …\r\n


    HTTP/1.1 101 WebSocket Protocol Handshake\r\n
    Upgrade: WebSocket\r\n
    Connection: Upgrade\r\n
    …\r\n



                       www.devoxx.com
HTML 5 WebSocket Frames
 Frames can be sent full-duplex
   Either direction at any time

 Text Frames use terminator
	 \x80Hello, WebSocket\0xff
 Binary Frames use length prefix
	 \x00\0x10Hello, WebSocket

 Text and binary frames on same WebSocket


                           www.devoxx.com
DEMO
Java Messaging Service




                         www.devoxx.com
Kaazing WebSocket Support
                  Protocols


         ByteSocket



                 WebSocket

         Server-Sent
           Events


               Cross-Site XHR


                                postMessage
                 IFrame
         XHR




                          www.devoxx.com
HTML 5 Server-Sent Events
 A continuous stream of data sent from server to browser
   Standardizes Comet
   JavaScript API
   Wire protocol

 Browser Support
   Patch under review for Firefox trunk – Bug 338583
   Opera already done




                           www.devoxx.com
HTML 5 Server-Sent Events
 Introduced a new HTML DOM Element

 <eventsource src=“http://www.kaazing.org/sse”
                 onmessage=“alert(event.data)” >

 HTML DOM API
 
    var es =
 document.createElement(“eventsource”);
        es.addEventListener(“message”,
            function(event) { alert(event.data); },
 false);
        es.addEventSource(“http://www.kaazing.org/
 sse”);




                         www.devoxx.com
HTML 5 Server-Sent Events
Guaranteed message delivery
GET /sse HTTP/1.1\r\n
  Host: www.kaazing.org\r\n
  Last-Event-ID: 9\r\n
  …\r\n



  200 OK HTTP/1.1\r\n
  …\r\n

  :comment\n
  id: 10\n
  data: Hello, Server-Sent Events\n
  \n


                              www.devoxx.com
DEMO
HTML 5 Server-Sent Events




                            www.devoxx.com
Cross-Site XMLHttpRequest
 W3C Technical Report
   Access Control for Cross-Site Requests
   Published Sept 12, 2008
   http://www.w3.org/TR/access-control/

 Browser Support
   Firefox 3.1-beta
   IE8 XDomainRequest (similar)
   Opera, Safari, Chrome coming


                             www.devoxx.com
Cross-Site XMLHttpRequest

 GET / HTTP/1.1\r\n
  Host: www.w3.org\r\n
  Origin: http://www.kaazing.org\r\n
  …\r\n


 200 OK HTTP/1.1\r\n
 Allow-Origin: http://www.kaazing.org\r\n
 …\r\n




                     www.devoxx.com
HTML 5 postMessage
    Send Strings Between HTML Documents
      Documents may be served by different sites

    Standard API

   targetWindow.postMessage(message, targetOrigin)
    window.onmessage = function(event) {
      alert(event.data);
    }

    Browser Support
      IE 8, FF 3, Opera 9, WebKit nightlies


                               www.devoxx.com
Kaazing WebSocket Support
                  Protocols


         ByteSocket



                 WebSocket

         Server-Sent
           Events


               Cross-Site XHR


                                postMessage
                 IFrame
         XHR




                          www.devoxx.com
Kaazing ByteSocket
 Provides binary socket abstraction
 Leverages text-based WebSocket
   Encodes payload using base64

 Send and receive ByteBuffers
   JavaScript has no byte or ByteArray type (yet)

 Kaazing Gateway converts base64




                            www.devoxx.com
Kaazing Protocols
 Text or Binary
   Stomp
   XMPP
   IRC
   Telnet
   IMAP
   SMTP
   Custom…


                  www.devoxx.com
Kaazing Gateway Scalability
 Based on SEDA (Staged Event-Driven Architecture)
   Leverages Java New I/O (NIO)

 Concurrency
   Proportional to bandwidth not connections

 Latency
   Socket integration, bytes-in, bytes-out

 Stateless
   Minimal memory usage, balancing, failover

                            www.devoxx.com
Kaazing Gateway Security
                         www.server.co
                                                            IP
Domain Name                     m
                                                         Address
                         stock.server.co
   Server                       m                        65.43.2.
                                                                                                                                          Director
                          chat.server.co                    1
                                   Firewall                                Gatewa
                                m Public                                    yDMZ
                                                                                                                                             y
                                      IP                                      IP                                                           Server
                                   Addres                                  Addres
                                      s:                                      s:




                                                                                     >|< Kaazing Gateway




                                                                                                                                                     ldaps://directory.internal.net:
                                   65.43.2                                 10.0.0.
                                      .1                                      1
Web Page                                                    tcp://gateway.dmz.net:
                                   http://
                                                                     8080
Cha                    www.server.com:80

 t                                            Firewall




                                                                                                                                                                  636
                                                                                                                                           Stock
      Stoc                                                                                                                                 Serve
        k          wss://stock.server.com:                 tcp://gateway.dmz.net:                          tcp://stock.internal.net :        r
                             443                                    9090                                            61613

 Browser                                                                                                                                   Chat
                                                                                                                                           Serve
                                                                                                                                             r
                 wss://chat.server.com:443                tcp://gateway.dmz.net:                           tcp://chat.internal.net:5222
                                                                   9090


       Public Internet                                           DMZ                                                Internal Network
                    IP Addresses                                    IP Addresses                                                      IP Addresses
                   ! 10.0.0.0/24                                     10.0.0.0/24                                                   192.168.0.0/16
                ! 172.16.0.0/20
              ! 192.168.0.0/16                                www.devoxx.com
Kaazing Enterprise Gateway
 Features
   Adobe Flex APIs
   Flash runtime detection
   EncryptedKeyring
   Single sign-on
   Protocol Validation
   Protocol Security Enhancements
   Management


                             www.devoxx.com
DEMO
Kaazing Stomp client and XMPP Client




                          www.devoxx.com
Summary
HTML 5 Communication is here
WebSockets and SSE standardize Comet
Avoid vendor lock-in, the standards shall set you free!
Kaazing Community – www.kaazing.org
Kaazing Enterprise – www.kaazing.com




 36
                         www.devoxx.com
 Concluding statement

Next generation Web architecture has arrived!




                    www.devoxx.com
Q&A




      www.devoxx.com
Thanks for your attention!

      http://www.kaazing.com

       http://www.kaazing.org

        http://www.w3c.org



               www.devoxx.com

								
To top