html5 websocket introduction
DESCRIPTION
An introduction to HTML5 WebSocketTRANSCRIPT
![Page 1: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/1.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.1
High Performance
Reduced Complexity
Enterprise Support
Web. Upgraded.
Marcelo JabaliSolutions Architect
@mjabaliJuly, 2012
The Web Communication Revolution
HTML5 WebSocket Overview
![Page 2: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/2.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.2
Agenda
Introduction to HTML5 WebSocket WebSocket API WebSocket Protocol
![Page 3: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/3.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.3
About Me
Marcelo JabaliSolutions Consultant
marcelojabali.blogspot.com
mjabali
linkedin.com/in/jabali
![Page 4: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/4.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.4
Back-end server
WebSocket
WebSocket Server
Full duplex
BrowserWebTier
Half Duplex Full duplex
Back-end server
Middleware
Architectural (R)evolution
Web
Web
Legacy Web
Living Web
![Page 5: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/5.jpg)
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
![Page 6: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/6.jpg)
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
![Page 7: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/7.jpg)
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
![Page 8: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/8.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.8
Long 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
a/k/a Asynchronous polling
![Page 9: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/9.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.9
Streaming
• More efficient, but sometimes problematic
• Possible complications:o Proxies and firewallso Response builds up and must be flushed
periodicallyo Cross-domain issues to do with browserconnection limits
![Page 10: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/10.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.10
GET /PollingStock//PollingStock HTTP/1.1Host: localhost:8080User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-usAccept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveReferer: http://localhost:8080/PollingStock/Cookie: showInheritedConstant=false; showInheritedProtectedConstant=false; showInheritedProperty=false; showInheritedProtectedProperty=false; showInheritedMethod=false; showInheritedProtectedMethod=false; showInheritedEvent=false; showInheritedStyle=false; showInheritedEffect=false;
HTTP Request Headers
Client
![Page 11: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/11.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.11
HTTP Response Headers
• Total overhead: 871 bytes (example)• Often 2K+ bytes
• e.g. cookies
HTTP/1.x 200 OKX-Powered-By: Servlet/2.5Server: Sun Java System Application Server 9.1_02Content-Type: text/html;charset=UTF-8Content-Length: 321Date: Sat, 07 Nov 2009 00:32:46 GMT
Server
![Page 12: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/12.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.12
HTTP Header Traffic Analysis
* 871,000 bytes = 6,968,000 bits = ~6.6 Mbps
Client Overhead Bytes Overhead Mbps
1,000 871,000 ~6,6*
10,000 8,710,000 ~66
100,000 87,100,000 ~665
![Page 13: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/13.jpg)
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)
![Page 14: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/14.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.14
HTML5 WebSocket Overview
![Page 15: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/15.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.15
WebSocket History
Originally added to HTML5 specification as TCPConnection
Moved to its own specification
later on
![Page 16: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/16.jpg)
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://
![Page 17: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/17.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.17
USING THE WEBSOCKET API
![Page 18: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/18.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.18
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";}
JavaScript
Checking for support
![Page 19: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/19.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.19
//Create new WebSocketvar mySocket = new WebSocket("ws://www.WebSocket.org");
// Associate listenersmySocket.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);};
JavaScript
Using the WebSocket API
![Page 20: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/20.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.20
// Sending datamySocket.send("WebSocket Rocks!");
// Close WebSocketmySocket.close();
JavaScript
Using the WebSocket API
![Page 21: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/21.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.21
WebSocket API
Available? window.WebSocket or Modernizr.websocket
Events onopen, onerror, onmessageFunctions send, closeAttributes url, readyState,
bufferedAmount, extensions, protocol
http://dev.w3.org/html5/websockets/
Italics: -08 and later
![Page 22: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/22.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.22
Browser Support
Native:• Chrome 4+• Safari 5+• Firefox 4+• Opera 10.7+• Internet Explorer 10+
![Page 23: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/23.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.23
WebSocket Servers Libraries
Kaazing Socket.io (node.js) Apache-websocket Cramp Nowjs SockJS SuperWebSocket Jetty Atmosphere APE Project Xsockets Orbited Atmosphere Autobahn CouchDB Netty
• Misultin • Cowboy• YAWS• Juggernaut• PHP Websocket • websockify • ActiveMQ• HornetMQ• phpwebsocket • Protocol::WebSocket • em-websocket • Jwebsocket • WaterSprout Server• Pywebsocket• And more…
Client Libraries• Web-socket-js (JavaScript)• AS3 WebSocket (ActionScript)• .NET WebSocket client (.NET)• Anaida (.NET)• WebSocket Sharp (.NET)• Silverlight WebSocket client • Java WebSocket Client• Arduino C++ WebSocket client• Ruby-web-socket• ZTWebSocket (Objective-C)• Libwebsockets (C)
![Page 24: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/24.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.24
THE WEBSOCKET PROTOCOL
![Page 25: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/25.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.25
WebSocket Protocol History
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-hixie-thewebsocketprotocol-xx” IETF Network Working Group
“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
![Page 26: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/26.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.26
WebSocket Handshake
![Page 27: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/27.jpg)
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
![Page 28: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/28.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.28
WebSocket Frames
Wireshark Trace of WebSocket Message (Client to Server)
81 85 CB 6E 9F 8E 83 0B F3 E2 A4
83 0B F3 E2 A4XOR CB 6E 9F 8E CB -- -- -- -- -- 48 65 6C 6C 6F H e l l o
FIN bit, RSV bits, Op-
Codemask payload
MASK bit, payloadlength
![Page 29: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/29.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.29
WebSocket Efficiency
HTTP WebSocketOverhead 100s of bytes 2-6 bytes (typical)Latency New connection
each timeNone: Use existing connection
Latency (polling)
Wait for next interval
No waiting
Latency(long polling)
None, if request sent earlier+ time to set up next request
No waiting
![Page 30: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/30.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.30
Polling vs. WebSocket
![Page 31: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/31.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.31
Latency Reduction
![Page 32: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/32.jpg)
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/
![Page 33: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/33.jpg)
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.
![Page 34: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/34.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.34
Demo – Mobile Notifications
NotificationsEngine
APNS
TCP/HTTP
HTML5 WebSocket
FIREWALL
PushNotification
1. Gate Change Announcement2. Flight Cancellation3. Refund Request Process
Enterprise Messaging System / Apache ActiveMQ
ERP Refund System
CRM
FinanceFlight Control System
iOS/Android Native or HTML5 Hybrid App
HTML5 WebSocket
Cloud toDevice
Msg
Background / UnidirectionalForeground / Bi-directional, Low Latency, Guaranteed Delivery
Legend
Notification Demo Examples
![Page 35: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/35.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.35
Q & A
![Page 36: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/36.jpg)
Copyright © 2012 Kaazing Corporation. All Rights Reserved.36
![Page 37: HTML5 WebSocket Introduction](https://reader036.vdocument.in/reader036/viewer/2022062312/554f6cd8b4c905c8088b52dd/html5/thumbnails/37.jpg)
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.