real time web: is there a life without socket.io and node.js?
DESCRIPTION
A small overview of possible solutions for making real-time web in context of client (server is a black box)TRANSCRIPT
Real-time webIS THERE A LIFE WITHOUT SOCKET.IO AND NODE.JS?
2
Who am I Eduard Trayan Software developer at EPAM Systems Zend PHP 5.3 Certified developer SensioLabs Certified Symfony Developer [email protected]
3
Agenda Say some words about real-time web Do small overview about possible solutions And play game
4
Real-time web
5
What is the real-time web?
6
Real-time web Set of technologies and practices Receiving information as soon as possible Users doesn't need to check updates http://en.wikipedia.org/wiki/Real-time_web
7
Main principles – push instead of pull
8
Main principles – ASAP
9
Where to find a use?
10
Where to find a use?
11
Solutions
12
Possible solutions
Proprietary solutions
Comet
Ajax polling
WebSockets
13
Proprietary solutions
14
Proprietary solutions
Adobe Flash
Java applet
Microsoft Silverlight
15
Comet
16
What is the comet?
17
Comet is not a cleaner
18
Comet is not a solar system body
19
Comet Web application model Long-held HTTP requests Server push datahttp://en.wikipedia.org/wiki/Comet_(programming)
20
CometAjax long pollingForever iframeActiveXObject htmlfileServer sent eventsXMLHTTPRequest interactive stateJSONP long polling
21
Ajax long polling - algorithm
22
Ajax long polling - opportunities
Cross-domain requests
Unidirectional communications between client and server
Binary or text data
Or the same opportunities as provided by XMLHTTPRequest
23
Ajax long polling - disadvantagesBig delay between event and notification
Big number of requests
Big incoming traffic
Caching by browsers
Possible problems with proxy
24
What solution does facebook use for chat?
1. Ajax long polling2. WebSockets3. Forever iframe4. Proprietary solutions
25
Forever iframe - algorithm
26
Forever iframe - opportunities
Cross-domain requests
POST requests
Unidirectional communications between client and server
27
Forever iframe - disadvantagesLoad indication
Script buffering
Page buffering
Proxy buffering
Impossible to compress data
Changes in browser’s history
Hard to detect disconnections/errors
28
What solution does vk.com use for chat?1. WebSockets2. JSONP long polling3. Ajax long polling4. Proprietary solutions
29
ActiveXObject - algorithm
30
ActiveXObject - opportunities
Cross-domain requests
POST requests
Unidirectional communications between client and server
31
ActiveXObject - disadvantagesIE only
Script buffering
Page buffering
Proxy buffering
Impossible to compress data
Changes in browser’s history
Hard to detect disconnections/errors
32
What solution does vseti.by use for chat?1. Forever iframe2. Proprietary solutions3. ActiveXObject htmlfile4. Ajax long polling
33
SSE - algorithm
34
SSE - opportunitiesMultiline messages
Cross-domain requests
Unidirectional communications between client and server
Custom events
Automatic reconnect
Error handling
Control of events
35
SSE - disadvantagesDoesn’t work in IE
Doesn’t work in android browsers <4.4
Impossible to compress data
36
What solution does assistent.by use?1. Forever iframe2. Proprietary solutions3. ActiveXObject htmlfile4. Ajax long polling
37
XMLHTTPRequest interactive state -algorithm
38
XMLHTTPRequest interactive state -opportunitiesCross-domain requests
Unidirectional communications between client and server
Binary or text data
Or the same opportunities as provided by XMLHTTPRequest
39
XMLHTTPRequest interactive state -disadvantages
Doesn’t work at <IE10
Unsupported by mobile browsers
Impossible to compress data
40
What solution does flowdock use for chat?1. Forever iframe2. Proprietary solutions3. WebSockets4. Ajax long polling
41
JSONP long polling - algorithm
42
JSONP long polling - opportunities
Cross-domain requests
Unidirectional communications between client and server
43
JSONP long polling - specifics
Handling errors with callback/onload/onerror/onreadystatechange
Sending callback name in request
44
JSONP long polling - disadvantagesBig delay between event and notification
Big number of requests
Big incoming traffic
45
Ajax polling
46
Ajax polling - algorithm
47
Ajax polling - opportunities
Cross-domain requests
Unidirectional communications between client and server
Binary or text data
Or the same opportunities as provided in XMLHTTPRequest
48
Ajax polling - disadvantagesBig delay between event and notification
Big number of requests
Big incoming traffic
Caching by browsers
49
WebSockets
50
WebSocket - algorithm
51
WebSocket - opportunities
Bidirectional communications between client and server
Cross-domain requests
Binary or text data
Usage of extensions and subprotocols
52
WebSocket - disadvantagesDoesn’t work at <IE10, android browsers <4.4, iOS Safary <6.0, Safary <6
Possible problems with proxy
53
Useful tools
http://caniuse.com/
http://crossbrowsertesting.com/
http://www.browserstack.com/
54
Questions?