Taking a Quantum Leap with Html 5 WebSocket:Taking bi-directional communication on the web to the next levelComet Never More!(HTML 5 WebSockets in Theory and Practice)Shahriar HyderKaz Software Ltd.WebSockets == “TCP for the Web”
Complexity does not scale
Push technologiesFlash socketsSilverlight duplex servicesCometWebSockets
Client-server CommunicationAJAXWebSocketsComet
HTTP Is Not Full DuplexSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
Half-Duplex ArchitectureSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
Polling, Long-Polling, Streaming … Comet — Headache 2.0Use Comet to spellCOMplExiTy…Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
AJAX: PollingAttempting 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: PollingHigh 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 pollingShort 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 PollingAlso known as asynchronous-pollingBrowser sends a request to the server and the server keeps the request open for a set periodIf 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 trafficIn high-message rate situations, long-polling results in a continuous loop of immediate pollsThe 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.
StreamingMore efficient, but sometimes problematicPossible complications:o Proxies and firewallso Response builds up and must be flushed periodicallyo Cross-domain issues to do with browser connection limits
StreamingOne 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-PollingLong-polling, but works cross-domainRelies on JSONP technique for establishing trust<script> blocks instead of XHR
CometComet 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-directionalComet 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-directionalMost 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 HeadersGET /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 Response HeadersHTTP/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 GMTTotal (unnecessary) HTTP request and response header information overhead: 871 bytes (example)
Overhead can be as much as 2000 bytes
Does not scale!Enter HTML5 WebSocket!Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
Specification Stage
Yawn…… so why do we need WebSockets?Source: http://www.slideshare.net/goberoi/intro-to-websockets
2 good reasonsSource: http://www.slideshare.net/goberoi/intro-to-websockets
Desire for real-timeWant 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 tickerUpdating social streams / Social Networking (Twitter Feed)Smart power gridMore!Source: http://www.slideshare.net/goberoi/intro-to-websockets
HTTP doesn’t deliverPeople hack around this (see “Comet”)Polling, long-polling, stream via hidden iframeBUT these are slow, complex, and bulkyOr rely on plugins:Flash, SilverLight, Java appletsBUT 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 requestLower 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 dataSource: http://www.slideshare.net/goberoi/intro-to-websockets
What are WebSockets?+= ?Source: http://www.slideshare.net/goberoi/intro-to-websockets
DefinitionThe 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 WebSocketW3C API and IETF Protocol
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 SchemesWebSocketws://www.websocket.org/textWebSocket Securewss://www.websocket.org/encrypted-textSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
Possible WebSocket ArchitectureSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
HTML5 WebSocketConnection established by upgrading from the HTTP protocol to the WebSocket protocol using the same TCP connection
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 HandshakeClientGET /text HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: www.example.comOrigin: http://example.comWebSocket-Protocol: sample…\r\nServerHTTP/1.1 101 WebSocket Protocol HandshakeUpgrade: WebSocketConnection: UpgradeWebSocket-Origin: http://example.comWebSocket-Location: ws://example.com/demoWebSocket-Protocol: sample…\r\nSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
HTML5 WebSocket FramesFrames can be sent full-duplex, in either direction at the same time
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\x00Hello, WebSocket\0xff
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 maximumSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
Dramatic Reduction in Network TrafficWith WebSocket, each frame has only 2 bytes of packaging (a 500:1 or even 1000:1 reduction)
No latency involved in establishing new TCP connections for each HTTP message
Dramatic reduction in unnecessary network traffic and latency

Taking a Quantum Leap with Html 5 WebSocket

  • 1.
    Taking a QuantumLeap with Html 5 WebSocket:Taking bi-directional communication on the web to the next levelComet Never More!(HTML 5 WebSockets in Theory and Practice)Shahriar HyderKaz Software Ltd.WebSockets == “TCP for the Web”
  • 2.
  • 3.
    Push technologiesFlash socketsSilverlightduplex servicesCometWebSockets
  • 4.
  • 5.
    HTTP Is NotFull DuplexSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 6.
  • 7.
    Polling, Long-Polling, Streaming… Comet — Headache 2.0Use Comet to spellCOMplExiTy…Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 8.
    AJAX: PollingAttempting tosimulate 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: PollingHigh pollingfrequencies 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 pollingShort pollingis 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 PollingAlso knownas asynchronous-pollingBrowser sends a request to the server and the server keeps the request open for a set periodIf 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 trafficIn high-message rate situations, long-polling results in a continuous loop of immediate pollsThe 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, thebrowser 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.
    StreamingMore efficient, butsometimes problematicPossible complications:o Proxies and firewallso Response builds up and must be flushed periodicallyo Cross-domain issues to do with browser connection limits
  • 14.
    StreamingOne benefit ofstreaming 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-PollingLong-polling,but works cross-domainRelies on JSONP technique for establishing trust<script> blocks instead of XHR
  • 16.
    CometComet is knownby 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-directionalComet 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-directionalMost 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?Butif 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 HeadersGET/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;
  • 21.
    HTTP Response HeadersHTTP/1.x200 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 GMTTotal (unnecessary) HTTP request and response header information overhead: 871 bytes (example)
  • 22.
    Overhead can beas much as 2000 bytes
  • 23.
    Does not scale!EnterHTML5 WebSocket!Source: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 24.
  • 25.
    Yawn…… so whydo we need WebSockets?Source: http://www.slideshare.net/goberoi/intro-to-websockets
  • 26.
    2 good reasonsSource:http://www.slideshare.net/goberoi/intro-to-websockets
  • 27.
    Desire for real-timeWantlow 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 tickerUpdating social streams / Social Networking (Twitter Feed)Smart power gridMore!Source: http://www.slideshare.net/goberoi/intro-to-websockets
  • 28.
    HTTP doesn’t deliverPeoplehack around this (see “Comet”)Polling, long-polling, stream via hidden iframeBUT these are slow, complex, and bulkyOr rely on plugins:Flash, SilverLight, Java appletsBUT these don’t work everywhere (phones)Source: http://www.slideshare.net/goberoi/intro-to-websockets
  • 29.
    Damn, this ishairy: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 requestLower 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 dataSource: http://www.slideshare.net/goberoi/intro-to-websockets
  • 31.
    What are WebSockets?+=?Source: http://www.slideshare.net/goberoi/intro-to-websockets
  • 32.
    DefinitionThe WebSocket specification—developedas 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.
    HTML5 WebSocketW3C APIand IETF Protocol
  • 34.
  • 35.
    Enables web pagesto communicate with a remote host
  • 36.
    Traverses firewalls, proxies,and routers seamlessly
  • 37.
  • 38.
    Share port withexisting HTTP content
  • 39.
    Dramatic overhead reductionSource:http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 40.
  • 41.
    HTML5 WebSocket SchemesWebSocketws://www.websocket.org/textWebSocketSecurewss://www.websocket.org/encrypted-textSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 42.
    Possible WebSocket ArchitectureSource:http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 43.
    HTML5 WebSocketConnection establishedby upgrading from the HTTP protocol to the WebSocket protocol using the same TCP connection
  • 44.
    Once upgraded, WebSocketdata 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 HandshakeClientGET/text HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: www.example.comOrigin: http://example.comWebSocket-Protocol: sample…\r\nServerHTTP/1.1 101 WebSocket Protocol HandshakeUpgrade: WebSocketConnection: UpgradeWebSocket-Origin: http://example.comWebSocket-Location: ws://example.com/demoWebSocket-Protocol: sample…\r\nSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 46.
    HTML5 WebSocket FramesFramescan be sent full-duplex, in either direction at the same time
  • 47.
  • 48.
    Starts with a0x00 byte
  • 49.
    Ends with a0xFF byte
  • 50.
    Contains UTF-8 datain betweenSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 51.
  • 52.
    There is nodefined 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 maximumSource: http://www.slideshare.net/peterlubbers/html5-web-workersunleashed
  • 53.
    Dramatic Reduction inNetwork TrafficWith WebSocket, each frame has only 2 bytes of packaging (a 500:1 or even 1000:1 reduction)
  • 54.
    No latency involvedin establishing new TCP connections for each HTTP message
  • 55.
    Dramatic reduction inunnecessary network traffic and latency

Editor's Notes

  • #13 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.
  • #14 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.
  • #33 WebSocket is text-only
  • #38 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
  • #39 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.
  • #43 150 ms (TCP round trip to set up the connection plus a packet for the message)50 ms (just the packet for the message)
  • #44 150 ms (TCP round trip to set up the connection plus a packet for the message)50 ms (just the packet for the message)