SlideShare a Scribd company logo
HTML5 WebSocket
                                                   Overview
                                                       The Web Communication Revolution


                       Reduced Complexity                                                          Web. Upgraded.

    High Performance                                                      Enterprise Support



                                                                                               Marcelo Jabali
                                                                                           Solutions Architect
                                                                                                    @mjabali
                                                                                                      July, 2012

1                             Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Agenda


       Introduction to HTML5 WebSocket
       WebSocket API
       WebSocket Protocol




2                  Copyright © 2012 Kaazing Corporation. All Rights Reserved.
About Me


                                                         Marcelo Jabali
                                                         Solutions Consultant

                                                         marcelo.jabali@kaazing.com

                                                         marcelojabali.blogspot.com

                                                         mjabali

                                                         linkedin.com/in/jabali


3              Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Architectural (R)evolution

         Legacy Web
                                        Half Duplex                                           Full duplex




                                           Web

                Browser
                                                                             Web        Middleware Back-end
                                                                             Tier                   server

         Living Web

                                            WebSocket                                  Full duplex



                                              Web

                                                                        WebSocket                    Back-end
                                                                         Server                       server


4                         Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Limitations of HTTP


    •   Designed for document transfer
         • Request-response interaction
    •   Bi-directional but still half-duplex
         • Traffic flows in only one direction at a time
    •   Stateless
         • Header overhead
         information is
         sent with each HTTP
         request and response

5                     Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Emulating full-duplex HTTP


     •   AJAX (Asynchronous JavaScript + XML)
         • Content can change without loading the
           entire page
         • User-perceived low latency
     •   Comet
         • Technique for server push
         • Lack of a standard implementation
         • Comet adds lots of complexity


6                   Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Polling


    •   Polling is "nearly real-time"
    •   Used in Ajax applications to simulate real-time
        communication
    •   Browser sends HTTP requests at regular
        intervals and immediately receives a response




7                    Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Long Polling
    a/k/a Asynchronous polling



     •   Browser sends a request to the server, server
         keeps the request open for a set period
     •   Speed limited by response-request-response
     •   Request/response headers add overhead on
         the wire




8                                Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Streaming



    •   More efficient, but sometimes
        problematic
    •   Possible complications:
        o Proxies and firewalls
        o Response builds up and must be flushed
           periodically
        o Cross-domain issues
        to do with browser
        connection limits


9                   Copyright © 2012 Kaazing Corporation. All Rights Reserved.
HTTP Request Headers

     Client


        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;




10                         Copyright © 2012 Kaazing Corporation. All Rights Reserved.
HTTP Response Headers


     Server

        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




          • Total overhead: 871 bytes (example)
          • Often 2K+ bytes
             • e.g. cookies



11                          Copyright © 2012 Kaazing Corporation. All Rights Reserved.
HTTP Header Traffic Analysis




            Client                       Overhead Bytes                          Overhead Mbps

            1,000                                          871,000                       ~6,6*

            10,000                                     8,710,000                           ~66

            100,000                                  87,100,000                           ~665



                     * 871,000 bytes = 6,968,000 bits = ~6.6 Mbps




12                          Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Overhead…



        "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)




13                  Copyright © 2012 Kaazing Corporation. All Rights Reserved.
HTML5 WebSocket Overview




14         Copyright © 2012 Kaazing Corporation. All Rights Reserved.
WebSocket History



        Originally added to HTML5 specification as
         TCPConnection
        Moved to its
         own specification
         later on




15                   Copyright © 2012 Kaazing Corporation. All Rights Reserved.
HTML5 WebSocket


     •   W3C API and IETF Protocol
     •   Leverages Cross-Origin Resource Sharing
          • Enables web pages to communicate with a remote
            host
     •   Shares port with existing HTTP content
     •    Allows unlimited connections per Origin
         • Unlike HTTP which is limited by convention
         • One WebSocket handshake in progress per Origin
     •   Two schemes:
          • ws://
          • wss://

16                      Copyright © 2012 Kaazing Corporation. All Rights Reserved.
USING THE WEBSOCKET API


17           Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Checking for support


     JavaScript

        var status = document.getElementById("support");
        if (window.WebSocket) { // or Modernizr.websocket
          status.innerHTML = "HTML5 WebSocket is supported";
        } else {
          status.innerHTML = "HTML5 WebSocket is not supported";
        }




18                     Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Using the WebSocket API

     JavaScript

        //Create new WebSocket
        var mySocket = new WebSocket("ws://www.WebSocket.org");

        // Associate listeners
        mySocket.onopen = function(evt) {
        };
        mySocket.onclose = function(evt) {
          alert("closed w/ status: " + evt.code};
        };
        mySocket.onmessage = function(evt) {
          alert("Received message: " + evt.data);
        };
        mySocket.onerror = function(evt) {
          alert("Error);
        };



19                     Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Using the WebSocket API



     JavaScript


        // Sending data
        mySocket.send("WebSocket Rocks!");

        // Close WebSocket
        mySocket.close();




20                     Copyright © 2012 Kaazing Corporation. All Rights Reserved.
WebSocket API


     Available? window.WebSocket or
                Modernizr.websocket
     Events     onopen, onerror, onmessage
     Functions send, close
     Attributes url, readyState,
                bufferedAmount, extensions,
                protocol

              http://dev.w3.org/html5/websockets/



                                                                                   Italics: -08 and later
21                    Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Browser Support

     Native:
     • Chrome 4+
     • Safari 5+
     • Firefox 4+
     • Opera 10.7+
     • Internet Explorer 10+




22                 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
WebSocket Servers Libraries

        Kaazing                        •     Misultin                                      Client Libraries
        Socket.io (node.js)            •     Cowboy                                        • Web-socket-js (JavaScript)
        Apache-websocket               •     YAWS                                          • AS3 WebSocket (ActionScript)
        Cramp                          •     Juggernaut                                    • .NET WebSocket client (.NET)
        Nowjs                          •     PHP Websocket                                 • Anaida (.NET)
        SockJS
                                        •     websockify                                    • WebSocket Sharp (.NET)
        SuperWebSocket
                                        •     ActiveMQ                                      • Silverlight WebSocket client
        Jetty
                                        •     HornetMQ                                      • Java WebSocket Client
        Atmosphere
                                        •     phpwebsocket                                  • Arduino C++ WebSocket client
        APE Project
                                        •     Protocol::WebSocket                           • Ruby-web-socket
        Xsockets
        Orbited                        •     em-websocket                                  • ZTWebSocket (Objective-C)
        Atmosphere                     •     Jwebsocket                                    • Libwebsockets (C)
        Autobahn                       •     WaterSprout Server
        CouchDB                        •     Pywebsocket
        Netty                          •     And more…




23                             Copyright © 2012 Kaazing Corporation. All Rights Reserved.
THE WEBSOCKET PROTOCOL


24          Copyright © 2012 Kaazing Corporation. All Rights Reserved.
WebSocket Protocol History
     “draft-hixie-thewebsocketprotocol-xx” IETF Network Working Group
     Version        Date                            Details
     -00            Jan. 9 2009                     • Initial version
     -52            Oct. 23 2009                    • Subprotocol concept introduced
     -76            May 6 2010                      • Used in older browsers (FF4, etc.)

     “draft-ietf-hybi-thewebsocketprotocol-xx” (IETF HyBi Working Group)
     Version       Date                             Details
     -01           Aug. 31 2010                     • Added binary format
     -04           Jan. 11 2011                     • Introduced data masking to address proxy
                                                      server security issue
                                                    • Introduced including protocol version number
                                                      in handshake
     -14           Sep. 8 2011                      • Guidance on version number negotiation
     RFC 6455      Dec. 2011                        • Final version
                                                       http://tools.ietf.org/html/rfc6455

25                          Copyright © 2012 Kaazing Corporation. All Rights Reserved.
WebSocket Handshake




26                 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
WebSocket Frames


      •   Have a few header bytes
      •   Text or binary data
      •   Frames are masked from client to server




27                  Copyright © 2012 Kaazing Corporation. All Rights Reserved.
WebSocket Frames
     Wireshark Trace of WebSocket Message (Client to Server)




                                         FIN bit, MASK bit,
                                       RSV bits, Op- payload                mask             payload
                                          Code        length

                                             81 85 CB 6E 9F 8E 83 0B F3 E2 A4

                                                                                     83 0B F3 E2 A4
                                                                                   XOR CB 6E 9F 8E CB
                                                                                     -- -- -- -- --
                                                                                     48 65 6C 6C 6F
                                                                                      H e l l o


28                           Copyright © 2012 Kaazing Corporation. All Rights Reserved.
WebSocket Efficiency


                      HTTP                                             WebSocket
     Overhead         100s of bytes                                    2-6 bytes (typical)
     Latency          New connection                                   None: Use existing
                      each time                                        connection
     Latency          Wait for next                                    No waiting
     (polling)        interval
     Latency          None, if request                                 No waiting
     (long polling)   sent earlier
                      + time to set up
                      next request

29                     Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Polling vs. WebSocket




30                   Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Latency Reduction




31                   Copyright © 2012 Kaazing Corporation. All Rights Reserved.
WebSocket Benchmark


           Using Comet                                               Using WebSocket




             http://webtide.intalio.com/2011/09/cometd-2-4-0-websocket-benchmarks/

32                     Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Why WebSocket? WebSocket is about…

        Performance
          • WebSocket makes real-time communication much more efficient.

        Simplicity
          • WebSocket makes communication between a client and server
            over the web much simpler.

        Standards
          • WebSocket is an underlying network protocol that enables you to
            build other standard protocols on top of it.

        HTML5
          • WebSocket is part of an effort to provide advanced capabilities to
            HTML5 applications in order to compete with other platforms.


33                         Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Demo – Mobile Notifications
                                                                                                                  Notification Demo Examples
                                                                                                                     1. Gate Change Announcement
                                                                                                                     2. Flight Cancellation
                                                                                                                     3. Refund Request Process
                                                 APNS
                   Push
                Notification                                            TCP/HTTP

                                     Cloud to
                                     Device
                                       Msg




                                                                 F
                                                                          Notifications               ERP                       Refund                      CRM
                                                                 I
                                                                            Engine                                              System
                                                                R
                                                                E
                               HTML5 WebSocket                  W
                                                                AL
      iOS/Android Native or
                                                                 L
        HTML5 Hybrid App                                                                         Enterprise Messaging System / Apache ActiveMQ




                                  HTML5 WebSocket

                                                                                                              Flight Control                   Finance
                                                                                                                 System




                                                                                                                       Legend

                                                                                                                                         Background / Unidirectional
                                                                                                                                         Foreground / Bi-directional,
                                                                                                                                         Low Latency, Guaranteed
                                                                                                                                         Delivery

34                                                      Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Q&A




35   Copyright © 2012 Kaazing Corporation. All Rights Reserved.
36   Copyright © 2012 Kaazing Corporation. All Rights Reserved.
Copyright © 2011 Kaazing Corporation, All rights reserved.
     All materials, including labs and other handouts are property of Kaazing Corporation. Except when expressly
        permitted by Kaazing Corporation, you may not copy, reproduce, publish, or display any part of this training
                                           material, in any form, or by any means.




37                               Copyright © 2012 Kaazing Corporation. All Rights Reserved.

More Related Content

PPTX
JS Event Loop
PPTX
GRPC.pptx
PDF
Introduction to WebSockets Presentation
PDF
gRPC Design and Implementation
PDF
gRPC Overview
PPTX
Intro to WebSockets
PDF
Spring Cloud Workshop
PDF
Introduction to WebSockets
JS Event Loop
GRPC.pptx
Introduction to WebSockets Presentation
gRPC Design and Implementation
gRPC Overview
Intro to WebSockets
Spring Cloud Workshop
Introduction to WebSockets

What's hot (20)

PPTX
Message Broker System and RabbitMQ
PDF
gRPC with java
PPTX
Quic을 이용한 네트워크 성능 개선
ODP
Introduction To RabbitMQ
PPTX
PDF
RxJS Operators - Real World Use Cases (FULL VERSION)
PDF
Spring Framework - AOP
PDF
OpenAPI and gRPC Side by-Side
PDF
Distributed Tracing for Kafka with OpenTelemetry with Daniel Kim | Kafka Summ...
PDF
Akka.NET 으로 만드는 온라인 게임 서버 (NDC2016)
PPTX
Understanding react hooks
PDF
Lecture 3: Servlets - Session Management
PDF
JavaScript Fetch API
PPTX
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
PPTX
[Final] ReactJS presentation
PPT
React js
PDF
What is REST API? REST API Concepts and Examples | Edureka
PPT
Bowling Game Kata by Robert C. Martin
PPTX
Kafka presentation
PPTX
Migration d'une Architecture Microservice vers une Architecture Event-Driven ...
Message Broker System and RabbitMQ
gRPC with java
Quic을 이용한 네트워크 성능 개선
Introduction To RabbitMQ
RxJS Operators - Real World Use Cases (FULL VERSION)
Spring Framework - AOP
OpenAPI and gRPC Side by-Side
Distributed Tracing for Kafka with OpenTelemetry with Daniel Kim | Kafka Summ...
Akka.NET 으로 만드는 온라인 게임 서버 (NDC2016)
Understanding react hooks
Lecture 3: Servlets - Session Management
JavaScript Fetch API
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
[Final] ReactJS presentation
React js
What is REST API? REST API Concepts and Examples | Edureka
Bowling Game Kata by Robert C. Martin
Kafka presentation
Migration d'une Architecture Microservice vers une Architecture Event-Driven ...
Ad

Similar to HTML5 WebSocket Introduction (20)

PDF
Building Living Web Applications with HTML5 WebSockets
PPTX
V2 peter-lubbers-sf-jug-websocket
PDF
Html5 web sockets - Brad Drysdale - London Web 2011-10-20
PPTX
HTML5 Real-Time and Connectivity
PDF
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011
KEY
The HTML5 WebSocket API
PDF
HTML5 ADEO
PDF
Building HTML5 WebSocket Apps in Java at JavaOne Latin America 2012
PDF
HTML5 Websockets and Java - Arun Gupta
PDF
Websocket 1.0
PPT
Camelone-2012 HTML5 WebSocket ActiveMQ/Camel
PPTX
WebSocket protocol
PDF
WebSocket Perspectives and Vision for the Future - HTML5DevConf Oct 2013 SF
PDF
Connecting Physical Devices to the Web - Event Driven Architecture using WebS...
PPTX
Programming WebSockets with Glassfish and Grizzly
PDF
HTML5 WebSocket for the Real-Time Web and the Internet of Things
PDF
WebSocket Perspectives and Vision for the Future
PPTX
Realtime Messaging und verteilte Systeme mit SharePoint und Windows Azure Ser...
PPT
HTML5 WebSocket: The New Network Stack for the Web
PPTX
Writing Portable WebSockets in Java
Building Living Web Applications with HTML5 WebSockets
V2 peter-lubbers-sf-jug-websocket
Html5 web sockets - Brad Drysdale - London Web 2011-10-20
HTML5 Real-Time and Connectivity
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011
The HTML5 WebSocket API
HTML5 ADEO
Building HTML5 WebSocket Apps in Java at JavaOne Latin America 2012
HTML5 Websockets and Java - Arun Gupta
Websocket 1.0
Camelone-2012 HTML5 WebSocket ActiveMQ/Camel
WebSocket protocol
WebSocket Perspectives and Vision for the Future - HTML5DevConf Oct 2013 SF
Connecting Physical Devices to the Web - Event Driven Architecture using WebS...
Programming WebSockets with Glassfish and Grizzly
HTML5 WebSocket for the Real-Time Web and the Internet of Things
WebSocket Perspectives and Vision for the Future
Realtime Messaging und verteilte Systeme mit SharePoint und Windows Azure Ser...
HTML5 WebSocket: The New Network Stack for the Web
Writing Portable WebSockets in Java
Ad

Recently uploaded (20)

PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PPTX
Programs and apps: productivity, graphics, security and other tools
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
KodekX | Application Modernization Development
PPTX
Spectroscopy.pptx food analysis technology
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PPTX
Big Data Technologies - Introduction.pptx
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Review of recent advances in non-invasive hemoglobin estimation
PPTX
Cloud computing and distributed systems.
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Encapsulation theory and applications.pdf
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
Dropbox Q2 2025 Financial Results & Investor Presentation
Building Integrated photovoltaic BIPV_UPV.pdf
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Chapter 3 Spatial Domain Image Processing.pdf
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Programs and apps: productivity, graphics, security and other tools
Spectral efficient network and resource selection model in 5G networks
KodekX | Application Modernization Development
Spectroscopy.pptx food analysis technology
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Big Data Technologies - Introduction.pptx
Reach Out and Touch Someone: Haptics and Empathic Computing
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Review of recent advances in non-invasive hemoglobin estimation
Cloud computing and distributed systems.
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Digital-Transformation-Roadmap-for-Companies.pptx
Encapsulation_ Review paper, used for researhc scholars
Encapsulation theory and applications.pdf
Mobile App Security Testing_ A Comprehensive Guide.pdf

HTML5 WebSocket Introduction

  • 1. HTML5 WebSocket Overview The Web Communication Revolution Reduced Complexity Web. Upgraded. High Performance Enterprise Support Marcelo Jabali Solutions Architect @mjabali July, 2012 1 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 2. Agenda  Introduction to HTML5 WebSocket  WebSocket API  WebSocket Protocol 2 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 3. About Me Marcelo Jabali Solutions Consultant marcelo.jabali@kaazing.com marcelojabali.blogspot.com mjabali linkedin.com/in/jabali 3 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 4. Architectural (R)evolution Legacy Web Half Duplex Full duplex Web Browser Web Middleware Back-end Tier server Living Web WebSocket Full duplex Web WebSocket Back-end Server server 4 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 5. Limitations of HTTP • Designed for document transfer • Request-response interaction • Bi-directional but still half-duplex • Traffic flows in only one direction at a time • Stateless • Header overhead information is sent with each HTTP request and response 5 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 6. Emulating full-duplex HTTP • AJAX (Asynchronous JavaScript + XML) • Content can change without loading the entire page • User-perceived low latency • Comet • Technique for server push • Lack of a standard implementation • Comet adds lots of complexity 6 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 7. Polling • Polling is "nearly real-time" • Used in Ajax applications to simulate real-time communication • Browser sends HTTP requests at regular intervals and immediately receives a response 7 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 8. Long Polling a/k/a Asynchronous polling • Browser sends a request to the server, server keeps the request open for a set period • Speed limited by response-request-response • Request/response headers add overhead on the wire 8 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 9. Streaming • More efficient, but sometimes problematic • Possible complications: o Proxies and firewalls o Response builds up and must be flushed periodically o Cross-domain issues to do with browser connection limits 9 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 10. HTTP Request Headers Client 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; 10 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 11. HTTP Response Headers Server 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 • Total overhead: 871 bytes (example) • Often 2K+ bytes • e.g. cookies 11 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 12. HTTP Header Traffic Analysis Client Overhead Bytes Overhead Mbps 1,000 871,000 ~6,6* 10,000 8,710,000 ~66 100,000 87,100,000 ~665 * 871,000 bytes = 6,968,000 bits = ~6.6 Mbps 12 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 13. Overhead… "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) 13 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 14. HTML5 WebSocket Overview 14 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 15. WebSocket History  Originally added to HTML5 specification as TCPConnection  Moved to its own specification later on 15 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 16. HTML5 WebSocket • W3C API and IETF Protocol • Leverages Cross-Origin Resource Sharing • Enables web pages to communicate with a remote host • Shares port with existing HTTP content • Allows unlimited connections per Origin • Unlike HTTP which is limited by convention • One WebSocket handshake in progress per Origin • Two schemes: • ws:// • wss:// 16 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 17. USING THE WEBSOCKET API 17 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 18. Checking for support JavaScript var status = document.getElementById("support"); if (window.WebSocket) { // or Modernizr.websocket status.innerHTML = "HTML5 WebSocket is supported"; } else { status.innerHTML = "HTML5 WebSocket is not supported"; } 18 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 19. Using the WebSocket API JavaScript //Create new WebSocket var mySocket = new WebSocket("ws://www.WebSocket.org"); // Associate listeners mySocket.onopen = function(evt) { }; mySocket.onclose = function(evt) { alert("closed w/ status: " + evt.code}; }; mySocket.onmessage = function(evt) { alert("Received message: " + evt.data); }; mySocket.onerror = function(evt) { alert("Error); }; 19 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 20. Using the WebSocket API JavaScript // Sending data mySocket.send("WebSocket Rocks!"); // Close WebSocket mySocket.close(); 20 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 21. WebSocket API Available? window.WebSocket or Modernizr.websocket Events onopen, onerror, onmessage Functions send, close Attributes url, readyState, bufferedAmount, extensions, protocol http://dev.w3.org/html5/websockets/ Italics: -08 and later 21 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 22. Browser Support Native: • Chrome 4+ • Safari 5+ • Firefox 4+ • Opera 10.7+ • Internet Explorer 10+ 22 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 23. WebSocket Servers Libraries  Kaazing • Misultin Client Libraries  Socket.io (node.js) • Cowboy • Web-socket-js (JavaScript)  Apache-websocket • YAWS • AS3 WebSocket (ActionScript)  Cramp • Juggernaut • .NET WebSocket client (.NET)  Nowjs • PHP Websocket • Anaida (.NET)  SockJS • websockify • WebSocket Sharp (.NET)  SuperWebSocket • ActiveMQ • Silverlight WebSocket client  Jetty • HornetMQ • Java WebSocket Client  Atmosphere • phpwebsocket • Arduino C++ WebSocket client  APE Project • Protocol::WebSocket • Ruby-web-socket  Xsockets  Orbited • em-websocket • ZTWebSocket (Objective-C)  Atmosphere • Jwebsocket • Libwebsockets (C)  Autobahn • WaterSprout Server  CouchDB • Pywebsocket  Netty • And more… 23 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 24. THE WEBSOCKET PROTOCOL 24 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 25. WebSocket Protocol History “draft-hixie-thewebsocketprotocol-xx” IETF Network Working Group Version Date Details -00 Jan. 9 2009 • Initial version -52 Oct. 23 2009 • Subprotocol concept introduced -76 May 6 2010 • Used in older browsers (FF4, etc.) “draft-ietf-hybi-thewebsocketprotocol-xx” (IETF HyBi Working Group) Version Date Details -01 Aug. 31 2010 • Added binary format -04 Jan. 11 2011 • Introduced data masking to address proxy server security issue • Introduced including protocol version number in handshake -14 Sep. 8 2011 • Guidance on version number negotiation RFC 6455 Dec. 2011 • Final version http://tools.ietf.org/html/rfc6455 25 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 26. WebSocket Handshake 26 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 27. WebSocket Frames • Have a few header bytes • Text or binary data • Frames are masked from client to server 27 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 28. WebSocket Frames Wireshark Trace of WebSocket Message (Client to Server) FIN bit, MASK bit, RSV bits, Op- payload mask payload Code length 81 85 CB 6E 9F 8E 83 0B F3 E2 A4 83 0B F3 E2 A4 XOR CB 6E 9F 8E CB -- -- -- -- -- 48 65 6C 6C 6F H e l l o 28 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 29. WebSocket Efficiency HTTP WebSocket Overhead 100s of bytes 2-6 bytes (typical) Latency New connection None: Use existing each time connection Latency Wait for next No waiting (polling) interval Latency None, if request No waiting (long polling) sent earlier + time to set up next request 29 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 30. Polling vs. WebSocket 30 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 31. Latency Reduction 31 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 32. WebSocket Benchmark Using Comet Using WebSocket http://webtide.intalio.com/2011/09/cometd-2-4-0-websocket-benchmarks/ 32 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 33. Why WebSocket? WebSocket is about…  Performance • WebSocket makes real-time communication much more efficient.  Simplicity • WebSocket makes communication between a client and server over the web much simpler.  Standards • WebSocket is an underlying network protocol that enables you to build other standard protocols on top of it.  HTML5 • WebSocket is part of an effort to provide advanced capabilities to HTML5 applications in order to compete with other platforms. 33 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 34. Demo – Mobile Notifications Notification Demo Examples 1. Gate Change Announcement 2. Flight Cancellation 3. Refund Request Process APNS Push Notification TCP/HTTP Cloud to Device Msg F Notifications ERP Refund CRM I Engine System R E HTML5 WebSocket W AL iOS/Android Native or L HTML5 Hybrid App Enterprise Messaging System / Apache ActiveMQ HTML5 WebSocket Flight Control Finance System Legend Background / Unidirectional Foreground / Bi-directional, Low Latency, Guaranteed Delivery 34 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 35. Q&A 35 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 36. 36 Copyright © 2012 Kaazing Corporation. All Rights Reserved.
  • 37. Copyright © 2011 Kaazing Corporation, All rights reserved. All materials, including labs and other handouts are property of Kaazing Corporation. Except when expressly permitted by Kaazing Corporation, you may not copy, reproduce, publish, or display any part of this training material, in any form, or by any means. 37 Copyright © 2012 Kaazing Corporation. All Rights Reserved.

Editor's Notes

  • #2: VNC Demo: http://vimeo.com/35557394
  • #8: Three ways to request info: polling, long-polling, and streaming
  • #23: http://caniuse.com/#search=WebSocket
  • #26: - Former author: Ian Hickson, Google- Current authors: Ian Fette, Google and Alexey Melnikov, Isode- Former IETF HyBi Working Group co-chair - Joe Hildebrand, Cisco- Current IETF HyBi Working Group co-chairs - Salvatore Loreto, Research Scientist, Ericsson Research, Finland - Gabriel Montenegro, Microsoft- Last Call notification: http://www.ietf.org/mail-archive/web/hybi/current/msg07725.html
  • #27: This is what the handshake looks like. If you use the WebSocket API, this is what happens under the covers. It's normal HTTP, and in the first part, the GET, there is an "upgrade" header asking for an upgrade to WebSocket. This header triggers a response from the server which agrees and returns a bunch of headers back to the client with the origin and information on how to establish the WebSocket connection.
  • #28: Once you have this WebSocket connection setup you can start sending WebSocket frames. Again, you don't have to worry about creating these frames, you just use the WebSocket API to send your message – this is done under the covers. Your message is taken and put into a WebSocket "frame" that starts with hex-0 and ends with hex-FF bytes, and contains your data in UTF-8 format.You send this data along and effectively there's no real limit to how much data you can send. All of the chunking and lower-level stuff is done for you by the protocol. When binary support is added, the protocol will most likely add a length prefix because binary data may contain hex-0 and hex-FF bytes.
  • #30: Remember when we looked at HTTP earlier and saw an example with 871 bytes of header data? For WebSocket that number is 2 bytes. It's always fixed at 2 bytes while HTTP is variable. So you're going from 871 bytes to 2, which is huge reduction in overhead.We didn't explicitly cover it before, but each HTTP message is a brand new TCP connection which comes with some overhead. WebSockets maintain the same TCP connection. So you have two nice advantage of WebSocket over HTTP.
  • #31: Here is a graphical view of the data which shows the dramatic reduction in overhead relative to Ajax or Comet for any number of clients.
  • #32: Additionally you have a huge latency reduction because every time, as you can see in the polling example, you have a request and response. And each time a request has to be fired from the client. In the meantime, once the WebSocket upgrade has passed and WebSocket connection is established, the server can send messages at will. It doesn't have to wait for a request from the client.So you get 3x improvement in latency with WebSocket.
  • #33: Run by the Jetty folks on their optimized Comet server. Emulated a chatroom on EC2. Left: Comet implementation, 2-4ms latency for 5-50K emulated clients @ 10Kmessages/sec. Starts climbing linearly from there up to around 180ms @ 50K messages/sec, except for the 50K client case (hits an internal network limit @ Amazon.)Right: WebSocket implementation of same. 2-4ms latency for all cases _except_ a new 200K client setting that looked like it would start hitting the same internal network limit. (4x as many client, still 5-6 msec.)