Interactive web. O rly?

605 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
605
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Interactive web. O rly?

  1. 1. Interactive WebTimur BabyukSoftware engineer @ Lohika
  2. 2. Interactive Web
  3. 3. Interactive Web YES!
  4. 4. Web + HTTP =
  5. 5. Some fundamentals...
  6. 6. Hyper Text Transfer Protocol• Created in early 1990s• Very simple• Human readable• Extensible
  7. 7. Very simple
  8. 8. Very simple Hi! Give me file by URLGET /lolcats.html HTTP/1.1Host: www.lulz.com
  9. 9. Very simple Hi! Give me file by URLGET /lolcats.html HTTP/1.1Host: www.lulz.com Sure, take it. Bye.HTTP/1.0 200 OKContent-Length: 11598Content-Type: text/html<html> <head> <title>Lulz Cats</title> </head> <body> ...
  10. 10. 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
  11. 11. How to push data to client?
  12. 12. How to push data to client?
  13. 13. How to push data to client?
  14. 14. How to push data to client?
  15. 15. History
  16. 16. meta http-equiv="refresh"
  17. 17. meta http-equiv="refresh"<html> <head> <title>Meta Refresh</title> </head> <body> ... </body></html>
  18. 18. meta http-equiv="refresh"<html> <head> <title>Meta Refresh</title> <meta http-equiv="refresh" content="3"> </head> <body> ... </body></html>
  19. 19. meta http-equiv="refresh"• Legacy HTML feature
  20. 20. meta http-equiv="refresh"• Legacy HTML feature• User can be frustrated by sudden page reload
  21. 21. meta http-equiv="refresh"• Legacy HTML feature• User can be frustrated by sudden page reload• History is broken
  22. 22. meta http-equiv="refresh"• Legacy HTML feature• User can be frustrated by sudden page reload• History is broken• Large traffic...
  23. 23. meta http-equiv="refresh"• Legacy HTML feature• User can be frustrated by sudden page reload• History is broken• Large traffic...
  24. 24. AJAX
  25. 25. AJAXJavaScript
  26. 26. AJAXJavaScript + XMLHttpRequest
  27. 27. AJAXJavaScript + XMLHttpRequest + JSON
  28. 28. AJAXJavaScript + XMLHttpRequest + JSON + DOM
  29. 29. AJAXJavaScript + XMLHttpRequest + JSON + DOM =
  30. 30. Polling
  31. 31. PollingAny news? No
  32. 32. PollingAny news? NoAny news? No
  33. 33. PollingAny news? NoAny news? NoAny news? No
  34. 34. PollingAny news? NoAny news? NoAny news? No
  35. 35. PollingAny news? NoAny news? NoAny news? NoAny news? Yes! ...
  36. 36. PollingPros• Easy implementation• DurableCons• Not really interactive• Lots of empty traffic• High server load
  37. 37. Long Polling
  38. 38. Long Polling Any news?
  39. 39. Long Polling Any news?
  40. 40. Long Polling Any news? Yes!
  41. 41. Long Polling Any news? Yes! Any news? ...
  42. 42. Long Polling Any news? Yes! Any news? ...
  43. 43. Long PollingPros• Cardinally reduces server load• Almost real-time interactivityCons• Need to reconnect, empty traffic remains• Tricky implementation
  44. 44. HTTP chunked response• Part of HTTP protocol• Available since HTTP 1.1• Useful when server does not know exact size of requested resource
  45. 45. HTTP chunked response Hi! Give me file
  46. 46. 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>...
  47. 47. 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
  48. 48. 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 ...
  49. 49. 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
  50. 50. How to use it?
  51. 51. Forever Frame
  52. 52. Forever Frame<html><head></head><body><script> var newMessage = function(msg){ // message handling };</script><iframe src=“http://host/stream" style=“visibility: hidden;”/></body></html>
  53. 53. 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>...
  54. 54. 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>...
  55. 55. 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>...
  56. 56. 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>...
  57. 57. Forever FramePros• No gap between near messages• No reconnections between server eventsCons• Frame being filled with messages causes browser’s memory leak• Reconnections handling routine to be implemented manually
  58. 58. What’s your name?Alex Russell, one of DojoToolkit founders gaveserver to client pushtechnologies stack anexposed name: Comet
  59. 59. What’s your name?Alex Russell, one of DojoToolkit founders gaveserver to client pushtechnologies stack anexposed name: Comet
  60. 60. What’s your name?
  61. 61. Web Socket• A special protocol over TCP• Allows full duplex between client and server• HTTP is used to initialize connection• Permanent TCP connection
  62. 62. Web SocketProtocol 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=
  63. 63. 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>
  64. 64. Web SocketPros• Full duplex• Connection is managed by browserCons• Not supported by all browsers and servers• Protocol is not HTTP based• Standard is not fixed as yet
  65. 65. 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)
  66. 66. Server Side EventsRequest:GET /eventsource HTTP/1.1Host: host.comConnection: keep-aliveAccept: text/event-streamResponse:HTTP/1.1 200 OKContent-Type: text/event-streamTransfer-Encoding: chunkedExpires: -1
  67. 67. 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>
  68. 68. Server Side EventsPros• Reconnections are handled by browser• Based on HTTPCons• No full duplex• Not supported by all browsers
  69. 69. Conclusions• 4 real-time messaging technologies: – Long Polling – Forever Frame – Web Socket – Server Side Events• Not everywhere supported the same
  70. 70. What to choose?
  71. 71. What to choose? ALL OF THEM!
  72. 72. Implementations?!
  73. 73. Implementations?! socket.io for Node.js SignalR for .NET stack
  74. 74. 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!!!
  75. 75. Demo
  76. 76. ???????
  77. 77. Skype:http://cometdaily.comhttp://en.wikipedia.org/wiki/Comet_(programming)http://www.html5rocks.com/en/tutorials/websockets/basicshttp://www.html5rocks.com/en/tutorials/eventsource/basicshttp://signalr.nethttp://socket.io

×