Web Real-time Communications
Upcoming SlideShare
Loading in...5

Web Real-time Communications



This presentation aggregates common approaches of real-time client-server communications provided by Web Standards. It focuses on comparison of different techniques like polling, comet, Web Sockets, ...

This presentation aggregates common approaches of real-time client-server communications provided by Web Standards. It focuses on comparison of different techniques like polling, comet, Web Sockets, Server-Sent Events.



Total Views
Views on SlideShare
Embed Views



2 Embeds 3

http://www.linkedin.com 2
http://www.slideee.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Web Real-time Communications Web Real-time Communications Presentation Transcript

  • Real-time Communication Client-Server Alexei Skachykhin – Software Engineer iTechArt, 2014
  • Pull model Xhr Xhr Xhr
  • Real-time Use cases Live feeds
  • Real-time Use cases Multiplayer games
  • Real-time Use cases Live sync applications
  • Pull & push model Xhr ? Xhr Xhr ? ?
  • Real-time Workarounds Comet Polling Long Polling HTTP Streaming
  • Polling Periodic XHR requests aimed to simulate push model
  • Polling Interaction diagram
  • Polling Request & response POST http://q90.queuev4.vk.com/im705 HTTP/1.1 Accept: */* X-Requested-With: XMLHttpRequest HTTP/1.1 200 OK Server: nginx/1.2.4 Date: Tue, 21 Jan 2014 23:22:31 GMT Content-Type: text/javascript; charset=UTF-8 Content-Length: 180 Connection: keep-alive Pragma: no-cache Cache-Control: no-store [{"ts":"1103498799","events":["14<!>like_post<!>30602036_99896<!>2802<!>738<!>261"]}]
  • Demo Polling
  • Polling Protocol overhead Actual overhead of HTTP headers in case of VK.com is 1.4K
  • Polling Network throughput Overhead, K Polling interval, s Number of clients Throughput, Mbps 1.4 60 10000 1.1 1.4 1 10000 66 1.4 10 100000 66 (example statistics for vk.com)
  • Polling Characteristics - High latency High server workload High protocol overhead (HTTP headers) Potential cause of high battery drain + High degree of support across different browsers
  • Comet Periodic long-lived XHR requests aimed to simulate push model
  • Comet Types Long polling HTTP Streaming
  • Long Polling Interaction diagram
  • Demo Long Polling
  • Long Polling Characteristics + Reduced latency + Reduced server workload + Reduced protocol overhead (HTTP headers) - Tricky server configuration - Possible difficulties with intermediaries - Can cause stoppage of all requests until long polling returns
  • HTTP Streaming Comet technique similar to long polling but instead of closing connection, infinitely pushing data into it
  • HTTP Streaming Interaction diagram
  • HTTP Streaming Request & response GET /events HTTP/1.1 Accept: application/json Invented in 1994 by Netscape HTTP/1.1 200 OK Content-Type: multipart/x-mixedreplace;boundary=separator Transfer-Encoding: chunked --separator { “id": 1, "x": 137, "y": 21 } --separator { “id": 2, "x": 18, "y": 115 } --separator { “id": 7, "x": 99, "y": 34 }
  • Demo HTTP Streaming
  • HTTP Streaming Browser compatibility 10
  • HTTP Streaming Characteristics - Patchy browser support (Issue 249132) Tricky server configuration Possible difficulties with intermediaries Can cause stoppage of all requests until long polling returns + Reduced latency + Reduced server workload + Reduced protocol overhead (HTTP headers)
  • HTML5 Pave the Cowpaths When a practice is already widespread among authors, consider adopting it rather than forbidding it or inventing something new.
  • Server-Sent Events Comet mechanism build directly into Web browser www.w3.org/TR/eventsource
  • Server-Sent Events API var source = new EventSource(‘/events'); source.addEventListener('message', function (e) { console.log(e.data); }); source.addEventListener('open', function (e) { // Connection was opened. }); source.addEventListener('error', function (e) { if (e.readyState == EventSource.CLOSED) { // Connection was closed. } });
  • Server-Sent Events Request & response GET /events HTTP/1.1 Accept: text/event-stream HTTP/1.1 200 OK Content-Type: text/event-stream id: 12345 data: GOOG data: 556 retry: 10000 data: hello world data: {"msg": "First message"} event: userlogon
  • Demo Server-Sent Events
  • Server-sent Events Browser compatibility 5.0 caniuse.com/#feat=eventsource
  • Server-sent Events Advantages + Complexity is hidden from developer + Built-in reconnect + Standardized an agreed upon implementation
  • Pull & push model Xhr Xhr Xhr Xhr Xhr Xhr
  • Pull & push model Flaws - HTTP one request – one resource semantics Semi-duplex communications Some degree of non-networking latency Protocol overhead (HTTP headers)
  • Full-duplex model ? ? ?
  • Web Sockets Low-latency bi-directional client-server communication technology www.w3.org/TR/websockets
  • Web Sockets Full-duplex socket connection Web Socket protocol v13 (RFC 6455) instead of HTTP Uses HTTP for connection establishment
  • Web Sockets Connection var connection = new WebSocket('ws://html5rocks.websocket.org/echo'); Connection established by “upgrading” from HTTP to WebSocket protocol Runs via port 80/443 to simplify firewalls traversal Pseudo schemes: ws, wss
  • Web Sockets Connection handshake GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Client sends GET or CONNECT request to Web Socket endpoint Upgrade header indicates willing to upgrade connection from HTTP to Web Socket
  • Web Sockets Connection handshake HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Server responds with 101 status code and connection upgrade header From now on Web Socket protocol will be used instead of HTTP
  • Web Sockets API var connection = new WebSocket('ws://html5rocks.websocket.org/echo'); // When the connection is open, send some data to the server. connection.onopen = function () { // Send the message 'Ping' to the server. connection.send('Ping'); }; // Log errors connection.onerror = function (error) { // Log messages from the server console.log('WebSocket Error ' + error); }; connection.onmessage = function (e) { console.log('Server: ' + e.data); };
  • Demo Web Sockets
  • Web Sockets Server compatibility IIS8 + Native Web Sockets NodeJS + Socket.io Apache + apache-websocket
  • Web Sockets Browser compatibility 10 6.0 caniuse.com/#feat=websockets
  • Web Sockets Characteristics + + + + Low latency Low server workload Low protocol overhead Full-duplex - Multiple versions of protocol to support - Possible difficulties with intermediaries - Requires up-to-date browser
  • What to choose? Bleeding Edge Polling Simplicity Comet / Server-Sent Events Web Sockets WebRTC Efficiency
  • All in one It is possible to abstract communication details away from developer into libraries
  • Demo Socket IO & SignalR
  • Caveats 1. Some network topologies may prohibit long-lived connections 2. Intermediaries are still barely aware of Web Sockets 3. Long-lived connections are subject to spontaneous shutdown 4. Long-lived connections can prevent some browsers from spanning parallel HTTP requests 5. Web Sockets spec has bunch of legacy versions
  • Links Code samples: https://github.com/alexeiskachykhin/web-platform-playground
  • Links Socket IO: http://socket.io/ SignalR: http://signalr.net/ Live Sync Demos: http://www.frozenmountain.com/websync/demos/ Web Socket – TCP bridge: http://artemyankov.com/tcp-client-for-browsers/ Server-Sent Events: http://www.html5rocks.com/en/tutorials/eventsource/basics/ Web Sockets: http://www.websocket.org/
  • Thank you! Forward your questions to alexei.skachykhin@live.com