Web Real-time Communications
Download as PPTX, PDF4 likes1,431 views
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.
![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)
Web Real-time Communications
- 1. Real-time Communication Client-Server Alexei Skachykhin – Software Engineer iTechArt, 2014
- 5. Real-time Use cases Live sync applications
- 6. Pull & push model Xhr ? Xhr Xhr ? ?
- 8. Polling Periodic XHR requests aimed to simulate push model
- 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. Demo Polling
- 12. Polling Protocol overhead Actual overhead of 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 server workload High protocol overhead (HTTP headers) Potential cause of high battery drain + High degree of support across different browsers
- 15. Comet Periodic long-lived XHR requests aimed to simulate push model
- 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. HTTP Streaming Comet technique similar to long polling but instead of closing connection, infinitely pushing data into it
- 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 }
- 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. HTML5 Pave the Cowpaths When a practice is already widespread among authors, consider adopting it rather than forbidding it or inventing something new.
- 27. Server-Sent Events Comet mechanism build 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
- 32. Server-sent Events Advantages + Complexity is hidden from developer + Built-in reconnect + Standardized an agreed upon implementation
- 33. Pull & push model Xhr Xhr Xhr Xhr Xhr Xhr
- 34. Pull & push model Flaws - HTTP one request – one resource semantics Semi-duplex communications Some degree of non-networking latency Protocol overhead (HTTP headers)
- 36. Web Sockets Low-latency bi-directional client-server communication technology www.w3.org/TR/websockets
- 37. Web Sockets Full-duplex socket connection 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.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. 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. Demo Web Sockets
- 43. Web Sockets Server compatibility IIS8 + Native Web Sockets NodeJS + Socket.io Apache + apache-websocket
- 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. What to choose? Bleeding Edge Polling Simplicity Comet / Server-Sent Events Web Sockets WebRTC Efficiency
- 47. All in one It is possible to abstract communication details away from developer into libraries
- 48. Demo Socket IO & SignalR
- 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
- 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. Thank you! Forward your questions to [email protected]