Downloaded 26 times
![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"]}]](https://image.slidesharecdn.com/promotional-140303173846-phpapp01/85/Web-Real-time-Communications-10-320.jpg)
Uploaded byAlexei Skachykhin
Web Real-time Communications
The document discusses various real-time communication techniques for client-server interactions, such as polling, comet, server-sent events, and web sockets. It outlines the advantages and challenges of each method, highlighting issues like latency, server workload, and browser compatibility. The author emphasizes the importance of selecting the appropriate model based on application needs and technical constraints.
More Related Content
Similar to Web Real-time Communications
Web Real-time Communications
- 1. Real-time Communication Client-Server Alexei Skachykhin –Software Engineer iTechArt, 2014
- 2.
- 3.
- 4.
- 5. Real-time Use cases Live syncapplications
- 6. Pull & pushmodel Xhr ? Xhr Xhr ? ?
- 7.
- 8. Polling Periodic XHR requestsaimed to simulate push model
- 9.
- 10. Polling Request & response POSThttp://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.
- 12. Polling Protocol overhead Actual overheadof HTTP headers in case of VK.com is 1.4K
- 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. Polling Characteristics - High latency High serverworkload High protocol overhead (HTTP headers) Potential cause of high battery drain + High degree of support across different browsers
- 15. Comet Periodic long-lived XHRrequests aimed to simulate push model
- 16.
- 17.
- 18.
- 19. Long Polling Characteristics + Reducedlatency + 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. HTTP Streaming Comet techniquesimilar to long polling but instead of closing connection, infinitely pushing data into it
- 21.
- 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.
- 24.
- 25. HTTP Streaming Characteristics - Patchy browsersupport (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. HTML5 Pave the Cowpaths Whena practice is already widespread among authors, consider adopting it rather than forbidding it or inventing something new.
- 27. Server-Sent Events Comet mechanismbuild directly into Web browser www.w3.org/TR/eventsource
- 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. 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.
- 31.
- 32. Server-sent Events Advantages + Complexityis hidden from developer + Built-in reconnect + Standardized an agreed upon implementation
- 33. Pull & pushmodel Xhr Xhr Xhr Xhr Xhr Xhr
- 34. Pull & pushmodel Flaws - HTTP one request – one resource semantics Semi-duplex communications Some degree of non-networking latency Protocol overhead (HTTP headers)
- 35.
- 36. Web Sockets Low-latency bi-directionalclient-server communication technology www.w3.org/TR/websockets
- 37. Web Sockets Full-duplex socketconnection Web Socket protocol v13 (RFC 6455) instead of HTTP Uses HTTP for connection establishment
- 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. 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. Web Sockets Connection handshake HTTP/1.1101 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. 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.
- 43. Web Sockets Server compatibility IIS8+ Native Web Sockets NodeJS + Socket.io Apache + apache-websocket
- 44.
- 45. Web Sockets Characteristics + + + + Low latency Lowserver workload Low protocol overhead Full-duplex - Multiple versions of protocol to support - Possible difficulties with intermediaries - Requires up-to-date browser
- 46. What to choose? BleedingEdge Polling Simplicity Comet / Server-Sent Events Web Sockets WebRTC Efficiency
- 47. All in one Itis possible to abstract communication details away from developer into libraries
- 48. Demo Socket IO &SignalR
- 49. Caveats 1. Some networktopologies 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.
- 51. Links Socket IO: http://socket.io/ SignalR: http://signalr.net/ Live SyncDemos: 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. Thank you! Forward yourquestions to alexei.skachykhin@live.com