Web Real-time Communications

1,092 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,092
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web Real-time Communications

  1. 1. Real-time Communication Client-Server Alexei Skachykhin – Software Engineer iTechArt, 2014
  2. 2. Pull model Xhr Xhr Xhr
  3. 3. Real-time Use cases Live feeds
  4. 4. Real-time Use cases Multiplayer games
  5. 5. Real-time Use cases Live sync applications
  6. 6. Pull & push model Xhr ? Xhr Xhr ? ?
  7. 7. Real-time Workarounds Comet Polling Long Polling HTTP Streaming
  8. 8. Polling Periodic XHR requests aimed to simulate push model
  9. 9. Polling Interaction diagram
  10. 10. 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"]}]
  11. 11. Demo Polling
  12. 12. Polling Protocol overhead Actual overhead of HTTP headers in case of VK.com is 1.4K
  13. 13. 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)
  14. 14. 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
  15. 15. Comet Periodic long-lived XHR requests aimed to simulate push model
  16. 16. Comet Types Long polling HTTP Streaming
  17. 17. Long Polling Interaction diagram
  18. 18. Demo Long Polling
  19. 19. 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
  20. 20. HTTP Streaming Comet technique similar to long polling but instead of closing connection, infinitely pushing data into it
  21. 21. HTTP Streaming Interaction diagram
  22. 22. 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 }
  23. 23. Demo HTTP Streaming
  24. 24. HTTP Streaming Browser compatibility 10
  25. 25. 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)
  26. 26. HTML5 Pave the Cowpaths When a practice is already widespread among authors, consider adopting it rather than forbidding it or inventing something new.
  27. 27. Server-Sent Events Comet mechanism build directly into Web browser www.w3.org/TR/eventsource
  28. 28. 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. } });
  29. 29. 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
  30. 30. Demo Server-Sent Events
  31. 31. Server-sent Events Browser compatibility 5.0 caniuse.com/#feat=eventsource
  32. 32. Server-sent Events Advantages + Complexity is hidden from developer + Built-in reconnect + Standardized an agreed upon implementation
  33. 33. Pull & push model Xhr Xhr Xhr Xhr Xhr Xhr
  34. 34. Pull & push model Flaws - HTTP one request – one resource semantics Semi-duplex communications Some degree of non-networking latency Protocol overhead (HTTP headers)
  35. 35. Full-duplex model ? ? ?
  36. 36. Web Sockets Low-latency bi-directional client-server communication technology www.w3.org/TR/websockets
  37. 37. Web Sockets Full-duplex socket connection Web Socket protocol v13 (RFC 6455) instead of HTTP Uses HTTP for connection establishment
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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); };
  42. 42. Demo Web Sockets
  43. 43. Web Sockets Server compatibility IIS8 + Native Web Sockets NodeJS + Socket.io Apache + apache-websocket
  44. 44. Web Sockets Browser compatibility 10 6.0 caniuse.com/#feat=websockets
  45. 45. 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
  46. 46. What to choose? Bleeding Edge Polling Simplicity Comet / Server-Sent Events Web Sockets WebRTC Efficiency
  47. 47. All in one It is possible to abstract communication details away from developer into libraries
  48. 48. Demo Socket IO & SignalR
  49. 49. 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
  50. 50. Links Code samples: https://github.com/alexeiskachykhin/web-platform-playground
  51. 51. 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/
  52. 52. Thank you! Forward your questions to alexei.skachykhin@live.com

×