Interactive web. O rly?
Transcript of Interactive web. O rly?
![Page 1: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/1.jpg)
Interactive Web
Timur Babyuk
Software engineer @ Lohika
![Page 2: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/2.jpg)
Interactive Web
![Page 3: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/3.jpg)
Interactive Web
YES!
![Page 4: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/4.jpg)
![Page 5: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/5.jpg)
Web + HTTP =
![Page 6: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/6.jpg)
Some fundamentals...
![Page 7: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/7.jpg)
Hyper Text Transfer Protocol
• Created in early 1990s
• Very simple
• Human readable
• Extensible
![Page 8: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/8.jpg)
Very simple
![Page 9: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/9.jpg)
Very simple
Hi! Give me file by URL
GET /lolcats.html HTTP/1.1
Host: www.lulz.com
![Page 10: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/10.jpg)
Very simple
Hi! Give me file by URL
Sure, take it. Bye.
GET /lolcats.html HTTP/1.1
Host: www.lulz.com
HTTP/1.0 200 OK
Content-Length: 11598
Content-Type: text/html
<html>
<head>
<title>Lulz Cats</title>
</head>
<body>
...
![Page 11: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/11.jpg)
HTTP is One Way
• TCP session between client and server is opened once request is initiating
• Client sends request
• Server handles request
• Server sends result response
• TCP session is closed
![Page 12: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/12.jpg)
How to push data to client?
![Page 13: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/13.jpg)
How to push data to client?
![Page 14: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/14.jpg)
How to push data to client?
![Page 15: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/15.jpg)
How to push data to client?
![Page 16: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/16.jpg)
History
![Page 17: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/17.jpg)
meta http-equiv="refresh"
![Page 18: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/18.jpg)
meta http-equiv="refresh"
<html>
<head>
<title>Meta Refresh</title>
</head>
<body>
...
</body>
</html>
![Page 19: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/19.jpg)
meta http-equiv="refresh"
<html>
<head>
<title>Meta Refresh</title>
<meta http-equiv="refresh" content="3">
</head>
<body>
...
</body>
</html>
![Page 20: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/20.jpg)
meta http-equiv="refresh"
• Legacy HTML feature
![Page 21: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/21.jpg)
meta http-equiv="refresh"
• Legacy HTML feature
• User can be frustrated by sudden page reload
![Page 22: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/22.jpg)
meta http-equiv="refresh"
• Legacy HTML feature
• User can be frustrated by sudden page reload
• History is broken
![Page 23: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/23.jpg)
meta http-equiv="refresh"
• Legacy HTML feature
• User can be frustrated by sudden page reload
• History is broken
• Large traffic...
![Page 24: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/24.jpg)
meta http-equiv="refresh"
• Legacy HTML feature
• User can be frustrated by sudden page reload
• History is broken
• Large traffic...
![Page 25: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/25.jpg)
![Page 26: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/26.jpg)
AJAX
![Page 27: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/27.jpg)
AJAX
JavaScript
![Page 28: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/28.jpg)
AJAX
JavaScript + XMLHttpRequest
![Page 29: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/29.jpg)
AJAX
JavaScript + XMLHttpRequest + JSON
![Page 30: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/30.jpg)
AJAX
JavaScript + XMLHttpRequest + JSON + DOM
![Page 31: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/31.jpg)
AJAX
JavaScript + XMLHttpRequest + JSON + DOM =
![Page 32: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/32.jpg)
Polling
![Page 33: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/33.jpg)
Polling
Any news?
No
![Page 34: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/34.jpg)
Polling
Any news?
No
Any news?No
![Page 35: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/35.jpg)
Polling
Any news?
No
Any news?No
Any news?No
![Page 36: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/36.jpg)
Polling
Any news?
No
Any news?No
Any news?No
![Page 37: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/37.jpg)
Polling
Any news?
No
Any news?No
Any news?No
Any news?
Yes!
...
![Page 38: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/38.jpg)
Polling
Pros
• Easy implementation
• Durable
Cons
• Not really interactive
• Lots of empty traffic
• High server load
![Page 39: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/39.jpg)
![Page 40: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/40.jpg)
Long Polling
![Page 41: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/41.jpg)
Long Polling
Any news?
![Page 42: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/42.jpg)
Long Polling
Any news?
![Page 43: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/43.jpg)
Long Polling
Any news?
Yes!
![Page 44: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/44.jpg)
Long Polling
Any news?
Yes!
Any news?
...
![Page 45: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/45.jpg)
Long Polling
Any news?
Yes!
Any news?
...
![Page 46: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/46.jpg)
Long Polling
Pros
• Cardinally reduces server load
• Almost real-time interactivity
Cons
• Need to reconnect, empty traffic remains
• Tricky implementation
![Page 47: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/47.jpg)
![Page 48: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/48.jpg)
HTTP chunked response
• Part of HTTP protocol
• Available since HTTP 1.1
• Useful when server does not know exact size of requested resource
![Page 49: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/49.jpg)
HTTP chunked response
Hi! Give me file
![Page 50: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/50.jpg)
HTTP chunked response
Hi! Give me file
I don’t know exact size. Take 564 bytes
HTTP/1.0 200 OK
Content-Length: 11598
Content-Type: text/html
Transfer-Encoding: chunked
564
<html>...
![Page 51: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/51.jpg)
HTTP chunked response
Hi! Give me file
I don’t know exact size. Take 564 bytes
HTTP/1.0 200 OK
Content-Length: 11598
Content-Type: text/html
Transfer-Encoding: chunked
564
<html>...
Take 710 bytes
![Page 52: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/52.jpg)
HTTP chunked response
Hi! Give me file
I don’t know exact size. Take 564 bytes
HTTP/1.0 200 OK
Content-Length: 11598
Content-Type: text/html
Transfer-Encoding: chunked
564
<html>...
Take 710 bytes
Take 1240 bytes
...
![Page 53: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/53.jpg)
HTTP chunked response
Hi! Give me file
I don’t know exact size. Take 564 bytes
HTTP/1.0 200 OK
Content-Length: 11598
Content-Type: text/html
Transfer-Encoding: chunked
564
<html>...
Take 710 bytes
Take 1240 bytes
...
That’s all!
0
![Page 54: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/54.jpg)
How to use it?
![Page 55: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/55.jpg)
Forever Frame
![Page 56: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/56.jpg)
Forever Frame<html><head></head><body>
<script>
var newMessage = function(msg){
// message handling
};
</script>
<iframe src=“http://host/stream" style=“visibility: hidden;”/>
</body></html>
![Page 57: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/57.jpg)
Forever Frame<html><head></head><body>
<script>
var newMessage = function(msg){
// message handling
};
</script>
<iframe src=“http://host/stream" style=“visibility: hidden;”/>
</body></html>
Chunked response from http://host/stream:
<html><body>
...
![Page 58: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/58.jpg)
Forever Frame<html><head></head><body>
<script>
var newMessage = function(msg){
// message handling
};
</script>
<iframe src=“http://host/stream" style=“visibility: hidden;”/>
</body></html>
Chunked response from http://host/stream:
<html><body>
...
<script>window.parent.newMessage(“message1”);</script>
...
![Page 59: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/59.jpg)
Forever Frame<html><head></head><body>
<script>
var newMessage = function(msg){
// message handling
};
</script>
<iframe src=“http://host/stream" style=“visibility: hidden;”/>
</body></html>
Chunked response from http://host/stream:
<html><body>
...
<script>window.parent.newMessage(“message1”);</script>
...
<script>window.parent.newMessage(“message2”);</script>
...
![Page 60: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/60.jpg)
Forever Frame<html><head></head><body>
<script>
var newMessage = function(msg){
// message handling
};
</script>
<iframe src=“http://host/stream" style=“visibility: hidden;”/>
</body></html>
Chunked response from http://host/stream:
<html><body>
...
<script>window.parent.newMessage(“message1”);</script>
...
<script>window.parent.newMessage(“message2”);</script>
...
<script>window.parent.newMessage(“message3”);</script>
...
![Page 61: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/61.jpg)
Forever Frame
Pros
• No gap between near messages
• No reconnections between server events
Cons
• Frame being filled with messages causes browser’s memory leak
• Reconnections handling routine to be implemented manually
![Page 62: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/62.jpg)
What’s your name?
Alex Russell, one of Dojo Toolkit founders gave server to client push technologies stack an exposed name: Comet
![Page 63: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/63.jpg)
What’s your name?
Alex Russell, one of Dojo Toolkit founders gave server to client push technologies stack an exposed name: Comet
![Page 64: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/64.jpg)
What’s your name?
![Page 65: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/65.jpg)
![Page 66: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/66.jpg)
![Page 67: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/67.jpg)
Web Socket
• A special protocol over TCP
• Allows full duplex between client and server
• HTTP is used to initialize connection
• Permanent TCP connection
![Page 68: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/68.jpg)
Web Socket
Protocol handshake
GET ws://host.com HTTP/1.1
Host: host.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
![Page 69: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/69.jpg)
Web Socket
<script>
var websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {};
websocket.onclose = function(evt) {};
websocket.onmessage = function(evt) {};
websocket.onerror = function(evt) {};
...
websocket.send(data);
</script>
![Page 70: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/70.jpg)
Web Socket
Pros
• Full duplex
• Connection is managed by browser
Cons
• Not supported by all browsers and servers
• Protocol is not HTTP based
• Standard is not fixed as yet
![Page 71: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/71.jpg)
![Page 72: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/72.jpg)
Server Side Events
• New feature of HTML5
• One-way messaging from server to client
• Fully based on HTTP
• Permanent TCP connection
• Implemented using chunked encoding (like Forever Frame)
![Page 73: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/73.jpg)
Server Side Events
Request:GET /eventsource HTTP/1.1
Host: host.com
Connection: keep-alive
Accept: text/event-stream
Response:HTTP/1.1 200 OK
Content-Type: text/event-stream
Transfer-Encoding: chunked
Expires: -1
![Page 74: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/74.jpg)
Server Side Events
<script>
var source = new EventSource(url);
source.addEventListener(“message”, function(e){
// Process message in e.data
});
source.addEventListener(“error”, function(e){
if(e.readyState == EventSource.CLOSED)
// process
});
</script>
![Page 75: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/75.jpg)
Server Side Events
Pros
• Reconnections are handled by browser
• Based on HTTP
Cons
• No full duplex
• Not supported by all browsers
![Page 76: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/76.jpg)
Conclusions
• 4 real-time messaging technologies:
– Long Polling
– Forever Frame
– Web Socket
– Server Side Events
• Not everywhere supported the same
![Page 77: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/77.jpg)
What to choose?
![Page 78: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/78.jpg)
What to choose?
ALL OF THEM!
![Page 79: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/79.jpg)
![Page 80: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/80.jpg)
Implementations?!
![Page 81: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/81.jpg)
Implementations?!
socket.io for Node.js
SignalR for .NET stack
![Page 82: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/82.jpg)
SignalR
• Is being developed by two guys from ASP.NET team
• Open source (github)
• Supports all the 4 messaging technologies
• Automatic fallback from Web Sockets to Long Polling, auto detection of browser capabilities
• High level of abstraction – solves business needs
• ...
• Profit!!!
![Page 83: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/83.jpg)
Demo
![Page 84: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/84.jpg)
???????
![Page 85: Interactive web. O rly?](https://reader034.fdocuments.us/reader034/viewer/2022042716/55a2c6b31a28ab66158b47cb/html5/thumbnails/85.jpg)
Skype:
http://cometdaily.com
http://en.wikipedia.org/wiki/Comet_(programming)
http://www.html5rocks.com/en/tutorials/websockets/basics
http://www.html5rocks.com/en/tutorials/eventsource/basics
http://signalr.net
http://socket.io