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.

1. Real-time
Communication
Client-Server
Alexei Skachykhin – Software Engineer
iTechArt, 2014

2. Pull model
Xhr
Xhr
Xhr

3. Real-time
Use cases
Live feeds

4. Real-time
Use cases
Multiplayer games

5. Real-time
Use cases
Live sync applications

6. Pull & push model
Xhr
?
Xhr
Xhr
?
?

7. Real-time
Workarounds
Comet
Polling
Long
Polling
HTTP
Streaming

8. Polling
Periodic XHR requests aimed to simulate
push model

9. Polling
Interaction diagram

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

16. Comet
Types
Long
polling
HTTP
Streaming

17. Long Polling
Interaction diagram

18. Demo
Long Polling

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

21. HTTP Streaming
Interaction diagram

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. Demo
HTTP Streaming

24. HTTP Streaming
Browser compatibility
10

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

30. Demo
Server-Sent Events

31. Server-sent Events
Browser compatibility
5.0
caniuse.com/#feat=eventsource

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)

35. Full-duplex model
?
?
?

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

44. Web Sockets
Browser compatibility
10
6.0
caniuse.com/#feat=websockets

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

50. Links
Code samples:
https://github.com/alexeiskachykhin/web-platform-playground

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
alexei.skachykhin@live.com