Real time web: is there a life without socket.io and node.js?

Preview:

DESCRIPTION

A small overview of possible solutions for making real-time web in context of client (server is a black box)

Citation preview

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 eduardtrayan@gmail.com

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?

Recommended