web real-time communications
DESCRIPTION
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.TRANSCRIPT
![Page 1: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/1.jpg)
Real-time CommunicationClient-Server
Alexei Skachykhin – Software EngineeriTechArt, 2014
![Page 2: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/2.jpg)
Pull model
Xhr
Xhr Xhr
![Page 3: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/3.jpg)
Real-timeUse cases
Live feeds
![Page 4: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/4.jpg)
Real-timeUse cases
Multiplayer games
![Page 5: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/5.jpg)
Real-timeUse cases
Live sync applications
![Page 6: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/6.jpg)
Pull & push model
Xhr
Xhr Xhr
?
? ?
![Page 7: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/7.jpg)
Real-timeWorkarounds
PollingLong
PollingHTTP
Streaming
Comet
![Page 8: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/8.jpg)
Polling
Periodic XHR requests aimed to simulate push model
![Page 9: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/9.jpg)
PollingInteraction diagram
Server
Client
![Page 10: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/10.jpg)
PollingRequest & response
POST http://q90.queuev4.vk.com/im705 HTTP/1.1Accept: */*X-Requested-With: XMLHttpRequest
HTTP/1.1 200 OKServer: nginx/1.2.4Date: Tue, 21 Jan 2014 23:22:31 GMTContent-Type: text/javascript; charset=UTF-8Content-Length: 180Connection: keep-alivePragma: no-cacheCache-Control: no-store
[{"ts":"1103498799","events":["14<!>like_post<!>-30602036_99896<!>2802<!>738<!>261"]}]
![Page 11: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/11.jpg)
DemoPolling
![Page 12: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/12.jpg)
PollingProtocol overhead
Actual overhead of HTTP headers in case of VK.com is 1.4K
![Page 13: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/13.jpg)
PollingNetwork 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)
![Page 14: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/14.jpg)
PollingCharacteristics
- High latency- High server workload- High protocol overhead (HTTP headers)- Potential cause of high battery drain
+ High degree of support across different browsers
![Page 15: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/15.jpg)
Comet
Periodic long-lived XHR requests aimed to simulate push model
![Page 16: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/16.jpg)
CometTypes
Long polling
HTTP Streaming
![Page 17: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/17.jpg)
Long PollingInteraction diagram
Server
Client
![Page 18: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/18.jpg)
DemoLong Polling
![Page 19: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/19.jpg)
Long PollingCharacteristics
- 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)
![Page 20: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/20.jpg)
HTTP Streaming
Comet technique similar to long polling but instead of closing connection,
infinitely pushing data into it
![Page 21: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/21.jpg)
HTTP StreamingInteraction diagram
Server
Client
![Page 22: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/22.jpg)
HTTP StreamingRequest & response
GET /events HTTP/1.1Accept: application/json
HTTP/1.1 200 OKContent-Type: multipart/x-mixed-replace;boundary=separatorTransfer-Encoding: chunked
--separator { “id": 1, "x": 137, "y": 21 }
--separator{ “id": 2, "x": 18, "y": 115 }
--separator{ “id": 7, "x": 99, "y": 34 }
Invented in 1994 by Netscape
![Page 23: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/23.jpg)
DemoHTTP Streaming
![Page 24: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/24.jpg)
HTTP StreamingBrowser compatibility
10
![Page 25: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/25.jpg)
HTTP StreamingCharacteristics
- 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)
![Page 26: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/26.jpg)
HTML5Pave the Cowpaths
When a practice is already widespread among authors, consider adopting it rather than forbidding it or inventing something
new.
![Page 27: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/27.jpg)
Server-Sent Events
Comet mechanism build directly into Web browser
www.w3.org/TR/eventsource
![Page 28: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/28.jpg)
Server-Sent EventsAPI
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. }});
![Page 29: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/29.jpg)
Server-Sent EventsRequest & response
GET /events HTTP/1.1Accept: text/event-stream
HTTP/1.1 200 OKContent-Type: text/event-stream
id: 12345data: GOOGdata: 556
retry: 10000data: hello world
data: {"msg": "First message"}event: userlogon
![Page 30: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/30.jpg)
DemoServer-Sent Events
![Page 31: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/31.jpg)
Server-sent EventsBrowser compatibility
caniuse.com/#feat=eventsource
5.0
![Page 32: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/32.jpg)
Server-sent EventsAdvantages
+ Complexity is hidden from developer+ Built-in reconnect+ Standardized an agreed upon implementation
![Page 33: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/33.jpg)
Pull & push model
Xhr
Xhr Xhr
Xhr
XhrXhr
![Page 34: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/34.jpg)
Pull & push modelFlaws
- HTTP one request – one resource semantics- Semi-duplex communications- Some degree of non-networking latency- Protocol overhead (HTTP headers)
![Page 35: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/35.jpg)
Full-duplex model
?
? ?
![Page 36: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/36.jpg)
Web Sockets
Low-latency bi-directional client-server communication technology
www.w3.org/TR/websockets
![Page 37: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/37.jpg)
Web Sockets
Full-duplex socket connection
Web Socket protocol v13 (RFC 6455) instead of HTTP
Uses HTTP for connection establishment
![Page 38: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/38.jpg)
Web SocketsConnection
Runs via port 80/443 to simplify firewalls traversal
Pseudo schemes: ws, wss
Connection established by “upgrading” from HTTP to WebSocket protocol
var connection = new WebSocket('ws://html5rocks.websocket.org/echo');
![Page 39: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/39.jpg)
Web SocketsConnection 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
![Page 40: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/40.jpg)
Web SocketsConnection handshake
HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-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
![Page 41: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/41.jpg)
Web SocketsAPI
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 errorsconnection.onerror = function (error) { // Log messages from the server console.log('WebSocket Error ' + error);};
connection.onmessage = function (e) { console.log('Server: ' + e.data);};
![Page 42: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/42.jpg)
DemoWeb Sockets
![Page 43: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/43.jpg)
Web SocketsServer compatibility
IIS8 + Native Web Sockets NodeJS + Socket.io Apache + apache-websocket
![Page 44: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/44.jpg)
Web SocketsBrowser compatibility
caniuse.com/#feat=websockets
6.0
10
![Page 45: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/45.jpg)
Web SocketsCharacteristics
- Multiple versions of protocol to support - Possible difficulties with intermediaries- Requires up-to-date browser
+ Low latency+ Low server workload+ Low protocol overhead+ Full-duplex
![Page 46: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/46.jpg)
What to choose?
Simplicity Efficiency
PollingComet /
Server-Sent Events
Web Sockets WebRTC
Bleeding Edge
![Page 47: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/47.jpg)
All in one
It is possible to abstract communication details away from developer into libraries
![Page 48: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/48.jpg)
DemoSocket IO & SignalR
![Page 49: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/49.jpg)
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
![Page 50: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/50.jpg)
Links
Code samples:https://github.com/alexeiskachykhin/web-platform-playground
![Page 51: Web Real-time Communications](https://reader035.vdocuments.us/reader035/viewer/2022081507/554fb048b4c905ad218b51ea/html5/thumbnails/51.jpg)
LinksSocket 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/