Push the web with HTML5

2,167 views

Published on

Using Server-Sent Events, WebSockets etc. for real-time web communication.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,167
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • Beautiful nature\n
  • Beautiful churches (ortodox, russian) and mosks\n
  • Folk dances and songs\n
  • \n
  • \n
  • \n
  • \n
  • Somebody who don’t know what is RSS?\n
  • \n
  • \n
  • \n
  • \n
  • What is polling - get the RSS feed every x minutes. It’s like somebody entering this room every 5 minutes and asking “Is there something new?” Image if there are 10 or 20 men ;)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Push the web with HTML5

    1. 1. PUSH THE WEB with HTML5
    2. 2. BULGARIA
    3. 3. http://en.wikipedia.org/wiki/ Music_of_Bulgaria
    4. 4. REAL TIME WEB
    5. 5. RSSKING OF THE WEB
    6. 6. HARMONY
    7. 7. THEN THEY COME...
    8. 8. TOO FAST
    9. 9. TOO CROWDED
    10. 10. POLLING IMPOSSIBLE
    11. 11. PUSH!
    12. 12. PROBLEM ?
    13. 13. CURRENT WEB (HTTP) Request Response Close
    14. 14. SERVER TO SERVER PubSubHubBub XMPP
    15. 15. SERVER TO BROWSER Polling Long Polling Streaming
    16. 16. Too complicated
    17. 17. COST
    18. 18. STANDARDhttp://dev.w3.org/html5/spec/
    19. 19. <header> <aside><audio> <video> MARKUP
    20. 20. Server-sent Events WebSockets WebWorkersCOMMUNICATIONS
    21. 21. SERVER-SENT EVENTS Opera, 2006
    22. 22. http://dev.w3.org/html5/eventsource/ ???
    23. 23. Simple API
    24. 24. REQUESTGET /Events HTTP/1.1Accept: text/event-stream
    25. 25. RESPONSEHTTP/1.1 200 OKContent-Type: text/event-stream
    26. 26. DATAHTTP/1.1 200 OKContent-Type: text/event-streamdata: My messagenn
    27. 27. MULTILINE DATAHTTP/1.1 200 OKContent-Type: text/event-streamdata: first linendata: second linenn
    28. 28. JSON DATAHTTP/1.1 200 OKContent-Type: text/event-streamdata: {ndata: "msg": "hello world",ndata: "id": 12345ndata: }nn
    29. 29. ORDER (ID + DATA)HTTP/1.1 200 OKContent-Type: text/event-streamid: 1234ndata: first datannid: 1235ndata: second datann
    30. 30. EVENT NAMESHTTP/1.1 200 OKContent-Type: text/event-streamevent: updatendata: {"msg": "First message"}nnevent: userlogonndata: {"username": "John123"}nn
    31. 31. IT JUST WORKS!
    32. 32. SERVER CLIENT
    33. 33. WEBSOCKETS
    34. 34. http://dev.w3.org/html5/websockets/ http://bit.ly/9ioTAl
    35. 35. http://www.websockets.org/WEBSOCKETS“WebSockets is a technologyproviding for bi-directional,full-duplex communicationschannels, over a single TransmissionControl Protocol (TCP) socket,designed to be implemented inweb browsers and web servers.” --wikipedia
    36. 36. SERVER CLIENT
    37. 37. Simple API
    38. 38. Simple API
    39. 39. Simple API
    40. 40. WS://WSS://
    41. 41. HANDSHAKE
    42. 42. DATA FRAME0x00”...UTF-8...”xFF
    43. 43. NotEasy
    44. 44. NEED PATCHING
    45. 45. Server-sent WebSockets Events DirectionCross-domain Same-OriginOwn Format Order Data 00......FF Data: ........¥n Easy
    46. 46. HOW TO CHECK ? ?
    47. 47. Modernizr
    48. 48. http://zh.github.com/html5test.html
    49. 49. HOW TO USE ?
    50. 50. HELLOWORLD
    51. 51. WHAT YOUWANT?
    52. 52. USE READY BLOCKS
    53. 53. http://websocket.org/echo.html ws://echo.websocket.org
    54. 54. FUTURE? ?
    55. 55. EVENTSOURCE WEBSOCKET
    56. 56. EVENTSOURCE WEBSOCKET
    57. 57. EVENTSOURCE WEBSOCKET
    58. 58. EVENTSOURCE WEBSOCKET
    59. 59. http://www.chromium.org/spdy ( SPeeDy )
    60. 60. chrome://net-internals
    61. 61. TWT Stream #devlove
    62. 62. TWT Stream #devlove WebSocketsWeb Frontend ( JavaScript )
    63. 63. TWT Stream #devlove WebSockets RedisWeb Frontend ( JavaScript )
    64. 64. MATZ HEROKU
    65. 65. Web Frontend ( JavaScript )gem install herokuheroku create my-appgit push heroku master
    66. 66. http://pusher.com/
    67. 67. WebSockets Web Frontend ( JavaScript )heroku addons:add pusher
    68. 68. http://redistogo.com/
    69. 69. WebSockets Redis Web Frontend ( JavaScript )heroku addons:add redistogo
    70. 70. Twitter Stream API #devlove WebSockets RedisWeb Frontend ( JavaScript )
    71. 71. http://devlove.heroku.com/
    72. 72. Thank you!

    ×