SlideShare a Scribd company logo
1 of 55
Download to read offline
Taking a Quantum Leap with Html 5 WebSocket: Taking bi-directional communication on the web to the next level Comet Never More! (HTML 5 WebSockets in Theory and Practice) Shahriar Hyder Kaz Software Ltd. WebSockets == “TCP for the Web”
Complexity does not scale
Push technologies Flash sockets Silverlight duplex services Comet WebSockets
Client-server Communication AJAX WebSockets Comet
HTTP Is Not Full Duplex Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
Half-Duplex Architecture Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
Polling, Long-Polling, Streaming … Comet — Headache 2.0 Use Comet to spellCOMplExiTy… Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
AJAX: Polling Attempting to simulate bi-directional communications with AJAX requires polling schemes, which blindly check for updates irrespective of state changes in the app. The result is poor resource utilization on both the client and server, since CPU-cycles and memory are needlessly allocated to prematurely or belatedly detect updates on the server.  Consequently, depending on the rate in which events are published on the server, traditional AJAX apps must constantly strike a balance between shorter and longer polling intervals in an effort to improve the accuracy of individual requests.
AJAX: Polling High polling frequencies result in increased network traffic and server demands, while low polling frequencies result in missed updates and the delivery of stale information. In either case, some added latency is incurred. In low-message-rate situations, many connections are opened and closed needlessly. There are two types of polling, short polling and long polling.
Short polling Short polling is implemented by making a request to the web server every few seconds or so to see if data has changed. If it has, the web server will respond with the new data. Otherwise, it will respond with a blank message. The drawback to this technique, however, is both a surplus in server requests and an overhead in CPU usage on the web server to constantly check if an update to the data has been made.
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 If a notification is received within that period, a response containing the message is sent to the client. If a notification is not received within the set time period, the server sends a response to terminate the open request.  HTTP headers, present in both long-polling and polling often account for most of the network traffic In high-message rate situations, long-polling results in a continuous loop of immediate polls The drawback to this technique, like short polling, is that the web server still has to check if the data has changed every few seconds or so, creating an overhead in CPU usage.
Streaming 	With streaming, the browser sends a complete request, but the server sends and maintains an open response that is continuously updated and kept open indefinitely (or for a set period of time). The response is then updated whenever a message is ready to be sent, but the server never signals to complete the response, thus keeping the connection open to deliver future messages.  	However, since streaming is still encapsulated in HTTP, intervening firewalls and proxy servers may choose to buffer the response, increasing the latency of the message delivery. Therefore, many streaming Comet solutions fall back to long-polling in case a buffering proxy server is detected. Alternatively, TLS (SSL) connections can be used to shield the response from being buffered, but in that case the setup and tear down of each connection taxes the available server resources more heavily.
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
Streaming One benefit of streaming is reduced network traffic, which is the result of sending packets that only contain data rather than packets that contain both data and HTTP headers. The downside of streaming is that it is still encapsulated in HTTP, so intervening HTTP proxies may choose to buffer the response, increasing the latency of the message delivery.
Callback-Polling or JSONP-Polling Long-polling, but works cross-domain Relies on JSONP technique for establishing trust <script> blocks instead of XHR
Comet Comet is known by several other names, including Ajax Push, Reverse Ajax, Two-way-web, HTTP Streaming, and HTTP server push among others. The Comet model for communications was a departure from that found in the classical web model, in which events are client initiated. The most obvious benefit of Comet's model is the server's ability to send information to the browser without prompting from a client. However, this "push" style of communications has limited uses.
Comet: Two Connections, Bi-directional Comet attempted to deliver bi-directional communications by maintaining a persistent connection and a long-lived HTTP request on which server-side events could be sent to the browser, and making upstream requests to the server on a newly opened connection. The maintenance of these two connections introduces significant overhead in terms of resource consumption, which translates into added latency for sites under peak load. In addition, Comet solutions that employ a long-polling technique send undue HTTP request/response headers. Each time an event is sent by the server, the server severs its connection with the client browser, forcing the browser to reestablish its connection with the server. This action causes another client request and server response to be sent across the wire. Neither HTTP streaming nor Web Socket incur this network overhead.
Comet: Two Connections, Bi-directional Most Comet implementations rely on the Bayeux protocol. The use of this protocol requires messages from the origin services to be transformed from the messages' initial format to conform to the Bayeux protocol. This transformation introduces unnecessary complexity in your system, requiring developers to manipulate one message format on the server (e.g., JMS, IMAP, XMPP, etc.) and a second message format (e.g., Bayeux and JSON) on the client. Moreover, the transformation code used to bridge your origin protocol to Bayeux introduces an unnecessary performance overhead into your system by forcing a message to be interpreted and processed prior to being sent over the wire. With Web Sockets, the message sent by the server is the same message delivered to the browser, eliminating the complexity and performance concerns introduced by transformation code.
Solutions or Hacks? But if you think about it, these techniques are just hacks, tricks used to simulate a technology that doesn’t exist: server-sent events. If the server could actually start the communication, none of these ugly tricks would be needed.
HTTP Request Headers 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;
HTTP Response Headers 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 ,[object Object]
Overhead can be as much as 2000 bytes
Does not scale!,[object Object]
Specification Stage
Yawn… … so why do we need WebSockets? Source: http://www.slideshare.net/goberoi/intro-to-websockets
2 good reasons Source: http://www.slideshare.net/goberoi/intro-to-websockets
Desire for real-time Want low latency 2-way communication for: Multiplayer online games (pong) Collaboration (live wikis) Dashboards (financial apps) Tracking (watch user actions) Presence (chat with customer support) Live sports ticker Updating social streams / Social Networking (Twitter Feed) Smart power grid More! Source: http://www.slideshare.net/goberoi/intro-to-websockets
HTTP doesn’t deliver People hack around this (see “Comet”) Polling, long-polling, stream via hidden iframe BUT these are slow, complex, and bulky Or rely on plugins: Flash, SilverLight, Java applets BUT these don’t work everywhere (phones) Source: http://www.slideshare.net/goberoi/intro-to-websockets
Damn, this is hairy: Source: http://www.slideshare.net/ismasan/websockets-and-ruby-eventmachine
Vs. HTTP hacks, WebSockets provide: Lower latency: no new TCP connections for each HTTP request Lower overhead: for each message sent(2 bytes vs. lines of HTTP header junk) Less traffic: since clients don’t need to poll, messages only sent when we have data Source: http://www.slideshare.net/goberoi/intro-to-websockets
What are WebSockets? + = ? Source: http://www.slideshare.net/goberoi/intro-to-websockets
Definition The WebSocket specification—developed as part of the HTML5 initiative—introduced the WebSocket JavaScript interface, which defines a full-duplex, bi-directional communication channel over a single TCP socket over which messages can be sent between client and server. The WebSocket standard simplifies much of the complexity around bi-directional web communication and connection management. This allows web developers to establish real time two way communications with a server using simple JavaScript without resorting to Flash, Java, Ajax long polling, comet, forever iframe, or other current workarounds.
HTML5 WebSocket ,[object Object]
Full-duplex, single socket
Enables web pages to communicate with a remote host
Traverses firewalls, proxies, and routers seamlessly
Leverages Cross-Origin Resource Sharing (CORS)
Share port with existing HTTP content
Dramatic overhead reductionSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
HTML5 WebSocket Schemes
HTML5 WebSocket Schemes ,[object Object],ws://www.websocket.org/text ,[object Object],wss://www.websocket.org/encrypted-text Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
Possible WebSocket Architecture Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
HTML5 WebSocket ,[object Object]
Once upgraded, WebSocket data frames can be sent back and forth between the client and the server in full-duplex modeSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
HTML5 WebSocket Handshake Client GET /text HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: www.example.com Origin: http://example.com WebSocket-Protocol: sample… Server HTTP/1.1 101 WebSocket Protocol HandshakeUpgrade: WebSocketConnection: Upgrade WebSocket-Origin: http://example.com WebSocket-Location: ws://example.com/demo WebSocket-Protocol: sample… Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
HTML5 WebSocket Frames ,[object Object]
Each frame of data:
Starts with a 0x00 byte
Ends with a 0xFF byte
Contains UTF-8 data in betweenSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
Example ,[object Object]
There is no defined maximum size	o If the user agent has content that is too large to be handled, it must fail the Web Socket connection 	o JavaScript does not allow >4GB of data, so that is a practical maximum Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
Dramatic Reduction in Network Traffic ,[object Object]
No latency involved in establishing new TCP connections for each HTTP message
Dramatic reduction in unnecessary network traffic and latency

More Related Content

What's hot

Covert Timing Channels using HTTP Cache Headers
Covert Timing Channels using HTTP Cache HeadersCovert Timing Channels using HTTP Cache Headers
Covert Timing Channels using HTTP Cache HeadersDenis Kolegov
 
Covert Timing Channels using HTTP Cache Headers
Covert Timing Channels using HTTP Cache HeadersCovert Timing Channels using HTTP Cache Headers
Covert Timing Channels using HTTP Cache HeadersDenis Kolegov
 
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...Holger Bartel
 
HyperText Transfer Protocol
HyperText Transfer ProtocolHyperText Transfer Protocol
HyperText Transfer Protocolponduse
 
Hypertex transfer protocol
Hypertex transfer protocolHypertex transfer protocol
Hypertex transfer protocolwanangwa234
 
HTTP request and response
HTTP request and responseHTTP request and response
HTTP request and responseSahil Agarwal
 
Introduction to HTTP - Hypertext Transfer Protocol
Introduction to HTTP - Hypertext Transfer ProtocolIntroduction to HTTP - Hypertext Transfer Protocol
Introduction to HTTP - Hypertext Transfer ProtocolSantiago Basulto
 
transfer protocols,ftp,smtp,pop,imap
transfer protocols,ftp,smtp,pop,imaptransfer protocols,ftp,smtp,pop,imap
transfer protocols,ftp,smtp,pop,imapAKSHIT KOHLI
 
02 wireshark http-sept_15_2009
02   wireshark http-sept_15_200902   wireshark http-sept_15_2009
02 wireshark http-sept_15_2009Vothe Dung
 
Simple Mail Transfer Protocol
Simple Mail Transfer ProtocolSimple Mail Transfer Protocol
Simple Mail Transfer ProtocolMaitree Patel
 
Simple mail transfer protocol
Simple mail transfer protocolSimple mail transfer protocol
Simple mail transfer protocolAnagha Ghotkar
 
IRJET- An Overview of Web Sockets: The Future of Real-Time Communication
IRJET- An Overview of Web Sockets: The Future of Real-Time CommunicationIRJET- An Overview of Web Sockets: The Future of Real-Time Communication
IRJET- An Overview of Web Sockets: The Future of Real-Time CommunicationIRJET Journal
 
Web Services 2009
Web Services 2009Web Services 2009
Web Services 2009Cathie101
 

What's hot (20)

Covert Timing Channels using HTTP Cache Headers
Covert Timing Channels using HTTP Cache HeadersCovert Timing Channels using HTTP Cache Headers
Covert Timing Channels using HTTP Cache Headers
 
Covert Timing Channels using HTTP Cache Headers
Covert Timing Channels using HTTP Cache HeadersCovert Timing Channels using HTTP Cache Headers
Covert Timing Channels using HTTP Cache Headers
 
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
 
Web tcp ip
Web tcp ipWeb tcp ip
Web tcp ip
 
HyperText Transfer Protocol
HyperText Transfer ProtocolHyperText Transfer Protocol
HyperText Transfer Protocol
 
Hypertex transfer protocol
Hypertex transfer protocolHypertex transfer protocol
Hypertex transfer protocol
 
HTTP request and response
HTTP request and responseHTTP request and response
HTTP request and response
 
HTTP
HTTPHTTP
HTTP
 
Introduction to HTTP - Hypertext Transfer Protocol
Introduction to HTTP - Hypertext Transfer ProtocolIntroduction to HTTP - Hypertext Transfer Protocol
Introduction to HTTP - Hypertext Transfer Protocol
 
Web technology Unit-I Part D - message format
Web technology Unit-I  Part D - message formatWeb technology Unit-I  Part D - message format
Web technology Unit-I Part D - message format
 
Http2
Http2Http2
Http2
 
transfer protocols,ftp,smtp,pop,imap
transfer protocols,ftp,smtp,pop,imaptransfer protocols,ftp,smtp,pop,imap
transfer protocols,ftp,smtp,pop,imap
 
02 wireshark http-sept_15_2009
02   wireshark http-sept_15_200902   wireshark http-sept_15_2009
02 wireshark http-sept_15_2009
 
HTTP Basics
HTTP BasicsHTTP Basics
HTTP Basics
 
Http Introduction
Http IntroductionHttp Introduction
Http Introduction
 
Simple Mail Transfer Protocol
Simple Mail Transfer ProtocolSimple Mail Transfer Protocol
Simple Mail Transfer Protocol
 
Simple mail transfer protocol
Simple mail transfer protocolSimple mail transfer protocol
Simple mail transfer protocol
 
IRJET- An Overview of Web Sockets: The Future of Real-Time Communication
IRJET- An Overview of Web Sockets: The Future of Real-Time CommunicationIRJET- An Overview of Web Sockets: The Future of Real-Time Communication
IRJET- An Overview of Web Sockets: The Future of Real-Time Communication
 
SNMP/SMTP/MIME
SNMP/SMTP/MIMESNMP/SMTP/MIME
SNMP/SMTP/MIME
 
Web Services 2009
Web Services 2009Web Services 2009
Web Services 2009
 

Viewers also liked

WebSocket 기반 쌍방향 메시징
WebSocket 기반 쌍방향 메시징WebSocket 기반 쌍방향 메시징
WebSocket 기반 쌍방향 메시징trustinlee
 
Kaazing - 웹소켓 기술의 유일한 엔터프라이즈 솔루션
Kaazing - 웹소켓 기술의 유일한 엔터프라이즈 솔루션Kaazing - 웹소켓 기술의 유일한 엔터프라이즈 솔루션
Kaazing - 웹소켓 기술의 유일한 엔터프라이즈 솔루션미래웹기술연구소 (MIRAE WEB)
 
HTML5 WebSocket Introduction
HTML5 WebSocket IntroductionHTML5 WebSocket Introduction
HTML5 WebSocket IntroductionMarcelo Jabali
 
iland Cloud Infrastructure
iland Cloud Infrastructureiland Cloud Infrastructure
iland Cloud Infrastructuremidtownchic
 
Customer Relationship Management Jumpstart
Customer Relationship Management JumpstartCustomer Relationship Management Jumpstart
Customer Relationship Management JumpstartKelly Cebold
 
Hmt Health Claims Brussels 1 December Pw
Hmt Health Claims Brussels 1 December PwHmt Health Claims Brussels 1 December Pw
Hmt Health Claims Brussels 1 December Pwpeterwennstrom
 
Chat luong nuoc uong english
Chat luong nuoc uong englishChat luong nuoc uong english
Chat luong nuoc uong englishHung Pham Thai
 
C# 3.0 Language Innovations
C# 3.0 Language InnovationsC# 3.0 Language Innovations
C# 3.0 Language InnovationsShahriar Hyder
 
Adapting a Consumer Payment Program to Fit Commercial Requirements
Adapting a Consumer Payment Program to Fit Commercial RequirementsAdapting a Consumer Payment Program to Fit Commercial Requirements
Adapting a Consumer Payment Program to Fit Commercial RequirementsMichel van Bommel
 
Donald j trump_trump_the_art_of_the_deal.thegioiebook.com
Donald j trump_trump_the_art_of_the_deal.thegioiebook.comDonald j trump_trump_the_art_of_the_deal.thegioiebook.com
Donald j trump_trump_the_art_of_the_deal.thegioiebook.comHung Pham Thai
 
Danh gia anh huong von dau tu
Danh gia anh huong von dau tuDanh gia anh huong von dau tu
Danh gia anh huong von dau tuHung Pham Thai
 
Phan ii quytrinhkythuatkhaithacmuvachamsoc
Phan ii quytrinhkythuatkhaithacmuvachamsocPhan ii quytrinhkythuatkhaithacmuvachamsoc
Phan ii quytrinhkythuatkhaithacmuvachamsocHung Pham Thai
 
Technology In The Classroom
Technology In The ClassroomTechnology In The Classroom
Technology In The Classroomhales4
 

Viewers also liked (20)

WebSocket 기반 쌍방향 메시징
WebSocket 기반 쌍방향 메시징WebSocket 기반 쌍방향 메시징
WebSocket 기반 쌍방향 메시징
 
Kaazing - 웹소켓 기술의 유일한 엔터프라이즈 솔루션
Kaazing - 웹소켓 기술의 유일한 엔터프라이즈 솔루션Kaazing - 웹소켓 기술의 유일한 엔터프라이즈 솔루션
Kaazing - 웹소켓 기술의 유일한 엔터프라이즈 솔루션
 
HTML5 WebSocket Introduction
HTML5 WebSocket IntroductionHTML5 WebSocket Introduction
HTML5 WebSocket Introduction
 
iland Cloud Infrastructure
iland Cloud Infrastructureiland Cloud Infrastructure
iland Cloud Infrastructure
 
Customer Relationship Management Jumpstart
Customer Relationship Management JumpstartCustomer Relationship Management Jumpstart
Customer Relationship Management Jumpstart
 
De14.12.2008
De14.12.2008De14.12.2008
De14.12.2008
 
Hmt Health Claims Brussels 1 December Pw
Hmt Health Claims Brussels 1 December PwHmt Health Claims Brussels 1 December Pw
Hmt Health Claims Brussels 1 December Pw
 
earth
earthearth
earth
 
Oi Presentation
Oi PresentationOi Presentation
Oi Presentation
 
Chat luong nuoc uong english
Chat luong nuoc uong englishChat luong nuoc uong english
Chat luong nuoc uong english
 
C# 3.0 Language Innovations
C# 3.0 Language InnovationsC# 3.0 Language Innovations
C# 3.0 Language Innovations
 
Adapting a Consumer Payment Program to Fit Commercial Requirements
Adapting a Consumer Payment Program to Fit Commercial RequirementsAdapting a Consumer Payment Program to Fit Commercial Requirements
Adapting a Consumer Payment Program to Fit Commercial Requirements
 
Chuong 01 database
Chuong 01  databaseChuong 01  database
Chuong 01 database
 
Donald j trump_trump_the_art_of_the_deal.thegioiebook.com
Donald j trump_trump_the_art_of_the_deal.thegioiebook.comDonald j trump_trump_the_art_of_the_deal.thegioiebook.com
Donald j trump_trump_the_art_of_the_deal.thegioiebook.com
 
Danh gia anh huong von dau tu
Danh gia anh huong von dau tuDanh gia anh huong von dau tu
Danh gia anh huong von dau tu
 
Phan ii quytrinhkythuatkhaithacmuvachamsoc
Phan ii quytrinhkythuatkhaithacmuvachamsocPhan ii quytrinhkythuatkhaithacmuvachamsoc
Phan ii quytrinhkythuatkhaithacmuvachamsoc
 
Technology In The Classroom
Technology In The ClassroomTechnology In The Classroom
Technology In The Classroom
 
Tcvn 3769 2004
Tcvn 3769 2004Tcvn 3769 2004
Tcvn 3769 2004
 
japan boy
japan boyjapan boy
japan boy
 
Chuong 06 report
Chuong 06   reportChuong 06   report
Chuong 06 report
 

Similar to Taking a Quantum Leap with Html 5 WebSocket

Decoding real time web communication
Decoding real time web communicationDecoding real time web communication
Decoding real time web communicationAMiT JAiN
 
Web technology-guide
Web technology-guideWeb technology-guide
Web technology-guideSrihari
 
wa-cometjava-pdf
wa-cometjava-pdfwa-cometjava-pdf
wa-cometjava-pdfHiroshi Ono
 
EAI design patterns/best practices
EAI design patterns/best practicesEAI design patterns/best practices
EAI design patterns/best practicesAjit Bhingarkar
 
Web Services 2009
Web Services 2009Web Services 2009
Web Services 2009Cathie101
 
Difference between Client Polling vs Server Push vs Websocket vs Long Polling
Difference between Client Polling vs Server Push vs Websocket vs Long PollingDifference between Client Polling vs Server Push vs Websocket vs Long Polling
Difference between Client Polling vs Server Push vs Websocket vs Long Pollingjeetendra mandal
 
Codecamp Iasi-26 nov 2011 - Html 5 WebSockets
Codecamp Iasi-26 nov 2011 - Html 5 WebSocketsCodecamp Iasi-26 nov 2011 - Html 5 WebSockets
Codecamp Iasi-26 nov 2011 - Html 5 WebSocketsFlorin Cardasim
 
Codecamp iasi-26 nov 2011-web sockets
Codecamp iasi-26 nov 2011-web socketsCodecamp iasi-26 nov 2011-web sockets
Codecamp iasi-26 nov 2011-web socketsCodecamp Romania
 
Building Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using WebsocketsBuilding Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using WebsocketsNaresh Chintalcheru
 
Computer network (10)
Computer network (10)Computer network (10)
Computer network (10)NYversity
 
Under the Covers with the Web
Under the Covers with the WebUnder the Covers with the Web
Under the Covers with the WebTrevor Lohrbeer
 
Hypertext Transfer Protocol
Hypertext Transfer ProtocolHypertext Transfer Protocol
Hypertext Transfer ProtocolRajan Pandey
 
Mail Server Project Report
Mail Server Project ReportMail Server Project Report
Mail Server Project ReportKavita Sharma
 
Introduction to gRPC: A general RPC framework that puts mobile and HTTP/2 fir...
Introduction to gRPC: A general RPC framework that puts mobile and HTTP/2 fir...Introduction to gRPC: A general RPC framework that puts mobile and HTTP/2 fir...
Introduction to gRPC: A general RPC framework that puts mobile and HTTP/2 fir...Codemotion
 
Introduction to gRPC - Mete Atamel - Codemotion Rome 2017
Introduction to gRPC - Mete Atamel - Codemotion Rome 2017Introduction to gRPC - Mete Atamel - Codemotion Rome 2017
Introduction to gRPC - Mete Atamel - Codemotion Rome 2017Codemotion
 
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 WebSteffen Gebert
 
Revisiting HTTP/2
Revisiting HTTP/2Revisiting HTTP/2
Revisiting HTTP/2Fastly
 

Similar to Taking a Quantum Leap with Html 5 WebSocket (20)

Decoding real time web communication
Decoding real time web communicationDecoding real time web communication
Decoding real time web communication
 
ClientServer Websocket.pptx
ClientServer Websocket.pptxClientServer Websocket.pptx
ClientServer Websocket.pptx
 
Websocket
WebsocketWebsocket
Websocket
 
Web technology-guide
Web technology-guideWeb technology-guide
Web technology-guide
 
wa-cometjava-pdf
wa-cometjava-pdfwa-cometjava-pdf
wa-cometjava-pdf
 
EAI design patterns/best practices
EAI design patterns/best practicesEAI design patterns/best practices
EAI design patterns/best practices
 
Web Services 2009
Web Services 2009Web Services 2009
Web Services 2009
 
Difference between Client Polling vs Server Push vs Websocket vs Long Polling
Difference between Client Polling vs Server Push vs Websocket vs Long PollingDifference between Client Polling vs Server Push vs Websocket vs Long Polling
Difference between Client Polling vs Server Push vs Websocket vs Long Polling
 
Codecamp Iasi-26 nov 2011 - Html 5 WebSockets
Codecamp Iasi-26 nov 2011 - Html 5 WebSocketsCodecamp Iasi-26 nov 2011 - Html 5 WebSockets
Codecamp Iasi-26 nov 2011 - Html 5 WebSockets
 
Codecamp iasi-26 nov 2011-web sockets
Codecamp iasi-26 nov 2011-web socketsCodecamp iasi-26 nov 2011-web sockets
Codecamp iasi-26 nov 2011-web sockets
 
Building Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using WebsocketsBuilding Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using Websockets
 
Computer network (10)
Computer network (10)Computer network (10)
Computer network (10)
 
Under the Covers with the Web
Under the Covers with the WebUnder the Covers with the Web
Under the Covers with the Web
 
Hypertext Transfer Protocol
Hypertext Transfer ProtocolHypertext Transfer Protocol
Hypertext Transfer Protocol
 
Mail Server Project Report
Mail Server Project ReportMail Server Project Report
Mail Server Project Report
 
Introduction to gRPC: A general RPC framework that puts mobile and HTTP/2 fir...
Introduction to gRPC: A general RPC framework that puts mobile and HTTP/2 fir...Introduction to gRPC: A general RPC framework that puts mobile and HTTP/2 fir...
Introduction to gRPC: A general RPC framework that puts mobile and HTTP/2 fir...
 
Introduction to gRPC - Mete Atamel - Codemotion Rome 2017
Introduction to gRPC - Mete Atamel - Codemotion Rome 2017Introduction to gRPC - Mete Atamel - Codemotion Rome 2017
Introduction to gRPC - Mete Atamel - Codemotion Rome 2017
 
Websocket
WebsocketWebsocket
Websocket
 
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
 
Revisiting HTTP/2
Revisiting HTTP/2Revisiting HTTP/2
Revisiting HTTP/2
 

More from Shahriar Hyder

Effective Communication Skills for Software Engineers
Effective Communication Skills for Software EngineersEffective Communication Skills for Software Engineers
Effective Communication Skills for Software EngineersShahriar Hyder
 
A JavaScript Master Class - From the Wows to the WTFs
A JavaScript Master Class - From the Wows to the WTFsA JavaScript Master Class - From the Wows to the WTFs
A JavaScript Master Class - From the Wows to the WTFsShahriar Hyder
 
Dependency Inversion Principle
Dependency Inversion PrincipleDependency Inversion Principle
Dependency Inversion PrincipleShahriar Hyder
 
Command Design Pattern
Command Design PatternCommand Design Pattern
Command Design PatternShahriar Hyder
 
Functional Programming Fundamentals
Functional Programming FundamentalsFunctional Programming Fundamentals
Functional Programming FundamentalsShahriar Hyder
 
Object Relational Mapping with LINQ To SQL
Object Relational Mapping with LINQ To SQLObject Relational Mapping with LINQ To SQL
Object Relational Mapping with LINQ To SQLShahriar Hyder
 

More from Shahriar Hyder (8)

Effective Communication Skills for Software Engineers
Effective Communication Skills for Software EngineersEffective Communication Skills for Software Engineers
Effective Communication Skills for Software Engineers
 
A JavaScript Master Class - From the Wows to the WTFs
A JavaScript Master Class - From the Wows to the WTFsA JavaScript Master Class - From the Wows to the WTFs
A JavaScript Master Class - From the Wows to the WTFs
 
Dependency Inversion Principle
Dependency Inversion PrincipleDependency Inversion Principle
Dependency Inversion Principle
 
Bridge Design Pattern
Bridge Design PatternBridge Design Pattern
Bridge Design Pattern
 
Command Design Pattern
Command Design PatternCommand Design Pattern
Command Design Pattern
 
Functional Programming Fundamentals
Functional Programming FundamentalsFunctional Programming Fundamentals
Functional Programming Fundamentals
 
Object Relational Mapping with LINQ To SQL
Object Relational Mapping with LINQ To SQLObject Relational Mapping with LINQ To SQL
Object Relational Mapping with LINQ To SQL
 
Introduction to Linq
Introduction to LinqIntroduction to Linq
Introduction to Linq
 

Recently uploaded

Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementDianaGray10
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxKunal Gupta
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024BookNet Canada
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceOpsTree solutions
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxatharvdev2010
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationBuild Intuit
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxmprakaash5
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 

Recently uploaded (20)

Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions management
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptx
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer Experience
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptx
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientation
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptx
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 

Taking a Quantum Leap with Html 5 WebSocket

  • 1. Taking a Quantum Leap with Html 5 WebSocket: Taking bi-directional communication on the web to the next level Comet Never More! (HTML 5 WebSockets in Theory and Practice) Shahriar Hyder Kaz Software Ltd. WebSockets == “TCP for the Web”
  • 3. Push technologies Flash sockets Silverlight duplex services Comet WebSockets
  • 5. HTTP Is Not Full Duplex Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 6. Half-Duplex Architecture Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 7. Polling, Long-Polling, Streaming … Comet — Headache 2.0 Use Comet to spellCOMplExiTy… Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 8. AJAX: Polling Attempting to simulate bi-directional communications with AJAX requires polling schemes, which blindly check for updates irrespective of state changes in the app. The result is poor resource utilization on both the client and server, since CPU-cycles and memory are needlessly allocated to prematurely or belatedly detect updates on the server. Consequently, depending on the rate in which events are published on the server, traditional AJAX apps must constantly strike a balance between shorter and longer polling intervals in an effort to improve the accuracy of individual requests.
  • 9. AJAX: Polling High polling frequencies result in increased network traffic and server demands, while low polling frequencies result in missed updates and the delivery of stale information. In either case, some added latency is incurred. In low-message-rate situations, many connections are opened and closed needlessly. There are two types of polling, short polling and long polling.
  • 10. Short polling Short polling is implemented by making a request to the web server every few seconds or so to see if data has changed. If it has, the web server will respond with the new data. Otherwise, it will respond with a blank message. The drawback to this technique, however, is both a surplus in server requests and an overhead in CPU usage on the web server to constantly check if an update to the data has been made.
  • 11. 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 If a notification is received within that period, a response containing the message is sent to the client. If a notification is not received within the set time period, the server sends a response to terminate the open request. HTTP headers, present in both long-polling and polling often account for most of the network traffic In high-message rate situations, long-polling results in a continuous loop of immediate polls The drawback to this technique, like short polling, is that the web server still has to check if the data has changed every few seconds or so, creating an overhead in CPU usage.
  • 12. Streaming With streaming, the browser sends a complete request, but the server sends and maintains an open response that is continuously updated and kept open indefinitely (or for a set period of time). The response is then updated whenever a message is ready to be sent, but the server never signals to complete the response, thus keeping the connection open to deliver future messages. However, since streaming is still encapsulated in HTTP, intervening firewalls and proxy servers may choose to buffer the response, increasing the latency of the message delivery. Therefore, many streaming Comet solutions fall back to long-polling in case a buffering proxy server is detected. Alternatively, TLS (SSL) connections can be used to shield the response from being buffered, but in that case the setup and tear down of each connection taxes the available server resources more heavily.
  • 13. 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
  • 14. Streaming One benefit of streaming is reduced network traffic, which is the result of sending packets that only contain data rather than packets that contain both data and HTTP headers. The downside of streaming is that it is still encapsulated in HTTP, so intervening HTTP proxies may choose to buffer the response, increasing the latency of the message delivery.
  • 15. Callback-Polling or JSONP-Polling Long-polling, but works cross-domain Relies on JSONP technique for establishing trust <script> blocks instead of XHR
  • 16. Comet Comet is known by several other names, including Ajax Push, Reverse Ajax, Two-way-web, HTTP Streaming, and HTTP server push among others. The Comet model for communications was a departure from that found in the classical web model, in which events are client initiated. The most obvious benefit of Comet's model is the server's ability to send information to the browser without prompting from a client. However, this "push" style of communications has limited uses.
  • 17. Comet: Two Connections, Bi-directional Comet attempted to deliver bi-directional communications by maintaining a persistent connection and a long-lived HTTP request on which server-side events could be sent to the browser, and making upstream requests to the server on a newly opened connection. The maintenance of these two connections introduces significant overhead in terms of resource consumption, which translates into added latency for sites under peak load. In addition, Comet solutions that employ a long-polling technique send undue HTTP request/response headers. Each time an event is sent by the server, the server severs its connection with the client browser, forcing the browser to reestablish its connection with the server. This action causes another client request and server response to be sent across the wire. Neither HTTP streaming nor Web Socket incur this network overhead.
  • 18. Comet: Two Connections, Bi-directional Most Comet implementations rely on the Bayeux protocol. The use of this protocol requires messages from the origin services to be transformed from the messages' initial format to conform to the Bayeux protocol. This transformation introduces unnecessary complexity in your system, requiring developers to manipulate one message format on the server (e.g., JMS, IMAP, XMPP, etc.) and a second message format (e.g., Bayeux and JSON) on the client. Moreover, the transformation code used to bridge your origin protocol to Bayeux introduces an unnecessary performance overhead into your system by forcing a message to be interpreted and processed prior to being sent over the wire. With Web Sockets, the message sent by the server is the same message delivered to the browser, eliminating the complexity and performance concerns introduced by transformation code.
  • 19. Solutions or Hacks? But if you think about it, these techniques are just hacks, tricks used to simulate a technology that doesn’t exist: server-sent events. If the server could actually start the communication, none of these ugly tricks would be needed.
  • 20. HTTP Request Headers 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;
  • 21.
  • 22. Overhead can be as much as 2000 bytes
  • 23.
  • 25. Yawn… … so why do we need WebSockets? Source: http://www.slideshare.net/goberoi/intro-to-websockets
  • 26. 2 good reasons Source: http://www.slideshare.net/goberoi/intro-to-websockets
  • 27. Desire for real-time Want low latency 2-way communication for: Multiplayer online games (pong) Collaboration (live wikis) Dashboards (financial apps) Tracking (watch user actions) Presence (chat with customer support) Live sports ticker Updating social streams / Social Networking (Twitter Feed) Smart power grid More! Source: http://www.slideshare.net/goberoi/intro-to-websockets
  • 28. HTTP doesn’t deliver People hack around this (see “Comet”) Polling, long-polling, stream via hidden iframe BUT these are slow, complex, and bulky Or rely on plugins: Flash, SilverLight, Java applets BUT these don’t work everywhere (phones) Source: http://www.slideshare.net/goberoi/intro-to-websockets
  • 29. Damn, this is hairy: Source: http://www.slideshare.net/ismasan/websockets-and-ruby-eventmachine
  • 30. Vs. HTTP hacks, WebSockets provide: Lower latency: no new TCP connections for each HTTP request Lower overhead: for each message sent(2 bytes vs. lines of HTTP header junk) Less traffic: since clients don’t need to poll, messages only sent when we have data Source: http://www.slideshare.net/goberoi/intro-to-websockets
  • 31. What are WebSockets? + = ? Source: http://www.slideshare.net/goberoi/intro-to-websockets
  • 32. Definition The WebSocket specification—developed as part of the HTML5 initiative—introduced the WebSocket JavaScript interface, which defines a full-duplex, bi-directional communication channel over a single TCP socket over which messages can be sent between client and server. The WebSocket standard simplifies much of the complexity around bi-directional web communication and connection management. This allows web developers to establish real time two way communications with a server using simple JavaScript without resorting to Flash, Java, Ajax long polling, comet, forever iframe, or other current workarounds.
  • 33.
  • 35. Enables web pages to communicate with a remote host
  • 36. Traverses firewalls, proxies, and routers seamlessly
  • 38. Share port with existing HTTP content
  • 39. Dramatic overhead reductionSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 41.
  • 42. Possible WebSocket Architecture Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 43.
  • 44. Once upgraded, WebSocket data frames can be sent back and forth between the client and the server in full-duplex modeSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 45. HTML5 WebSocket Handshake Client GET /text HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: www.example.com Origin: http://example.com WebSocket-Protocol: sample… Server HTTP/1.1 101 WebSocket Protocol HandshakeUpgrade: WebSocketConnection: Upgrade WebSocket-Origin: http://example.com WebSocket-Location: ws://example.com/demo WebSocket-Protocol: sample… Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 46.
  • 48. Starts with a 0x00 byte
  • 49. Ends with a 0xFF byte
  • 50. Contains UTF-8 data in betweenSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 51.
  • 52. There is no defined maximum size o If the user agent has content that is too large to be handled, it must fail the Web Socket connection o JavaScript does not allow >4GB of data, so that is a practical maximum Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 53.
  • 54. No latency involved in establishing new TCP connections for each HTTP message
  • 55. Dramatic reduction in unnecessary network traffic and latency
  • 56. Remember the Polling HTTP header traffic?Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 57. Latency Reduction Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 58. 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) Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 60. JavaScript //Checking for browser support if (window.WebSocket) { document.getElementById("support").innerHTML = "HTML5 WebSocket is supported"; } else { document.getElementById("support").innerHTML = "HTML5 WebSocket is not supported"; } Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 61. JavaScript //Create new WebSocket var mySocket = new WebSocket(“ws://www.websocket.org”); // Associate listeners mySocket.onopen = function(evt) { alert(“Connection open…”); }; mySocket.onmessage = function(evt) { alert(“Received message: “ + evt.data); }; mySocket.onclose = function(evt) { alert(“Connection closed…”); }; Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 62. JavaScript // Sending data mySocket.send(“HTML5 WebSocket Rocks!”); //Close WebSocket mySocket.close(); Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 63.
  • 64. You can extend client-server protocols to the web:
  • 69. Browser becomes a first-class network communication citizenSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 70.
  • 73. Ruby: Event Machine + em-websocket
  • 74. Python: Twisted + txWebSocket
  • 75. JavaScript: Node.js + WebSocket module
  • 76. Kaazing WebSocket Gateway (production since April 2009)
  • 81.
  • 84. Opera 10.70Emulation available through Kaazing WebSocket Gateway Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 85. DEMO TIME! Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 86. Quake II Gamehttp://code.google.com/p/quake2-gwt-port Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 87. Proxy Servers Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 88. Proxy server traversal decision tree Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 89. Summary Low latency is the mother of interactivity, and in no place is this more apparent than on the Web. Every slip of a millisecond equates to a slower end-user experience, which in turn translates into elevated risk that a user's eyes will avert elsewhere. Both AJAX and Comet attempt to obscure latency problems, and certainly address the issue of user-perceived latency. However, Web Socket removes the need to obscure such problems and introduces a real solution, one that does not play tricks on the perception of our end users, but delivers content in real time with real results. HTML5 Web Socket provides an enormous step forward in the scalability of the real-time web. As you have seen here, HTML5 Web Sockets can provide a 500:1 or - depending on the size of the HTTP headers - even a 1000:1 reduction in unnecessary HTTP header traffic and 3:1 reduction in latency. That is not just an incremental improvement; that is a revolutionary jump - a quantum leap.
  • 90. Concluding statement If HTTP did not restrict your creativity,what Web application would YOU create?

Editor's Notes

  1. With streaming, the browser sends a complete request, but the server sends and maintains an open response that is continuously updated and kept open indefinitely (or for a set period of time). The response is then updated whenever a message is ready to be sent, but the server never signals to complete the response, thus keeping the connection open to deliver future messages. However, since streaming is still encapsulated in HTTP, intervening firewalls and proxy servers may choose to buffer the response, increasing the latency of the message delivery. Therefore, many streaming Comet solutions fall back to long-polling in case a buffering proxy server is detected. Alternatively, TLS (SSL) connections can be used to shield the response from being buffered, but in that case the setup and tear down of each connection taxes the available server resources more heavily.
  2. With streaming, the browser sends a complete request, but the server sends and maintains an open response that is continuously updated and kept open indefinitely (or for a set period of time). The response is then updated whenever a message is ready to be sent, but the server never signals to complete the response, thus keeping the connection open to deliver future messages. However, since streaming is still encapsulated in HTTP, intervening firewalls and proxy servers may choose to buffer the response, increasing the latency of the message delivery. Therefore, many streaming Comet solutions fall back to long-polling in case a buffering proxy server is detected. Alternatively, TLS (SSL) connections can be used to shield the response from being buffered, but in that case the setup and tear down of each connection taxes the available server resources more heavily.
  3. WebSocket is text-only
  4. 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
  5. Text type requires high-order bit setBinary type requires high-order bit _not_ setThere is no defined maximum size. However, the protocol allows either side (browser or server) to terminate the connection if it cannot receive a large frame. So far, the definition of too large is left up to the implementation.If the user agent is faced with content that is too large to behandled appropriately, then it must fail the Web Socket connection.There is probably a practical maximum, but we have not discovered it as far as I know.You can&apos;t have four gigabytes of data in JavaScript, so the practical max is &lt;4GB for the JavaScript implementation.
  6. 150 ms (TCP round trip to set up the connection plus a packet for the message)50 ms (just the packet for the message)
  7. 150 ms (TCP round trip to set up the connection plus a packet for the message)50 ms (just the packet for the message)