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

1. PUSH THE WEB
with HTML5

3. BULGARIA

8. http://en.wikipedia.org/wiki/
Music_of_Bulgaria

9. REAL TIME WEB

13. RSS
KING OF THE WEB

14. HARMONY

15. THEN THEY COME...

16. TOO FAST

17. TOO CROWDED

18. POLLING IMPOSSIBLE

19. PUSH!

20. PROBLEM ?

21. CURRENT WEB (HTTP)
Request
Response
Close

22. SERVER TO SERVER
PubSubHubBub
XMPP

23. SERVER TO BROWSER
Polling
Long Polling
Streaming

25. Too complicated

26. COST

27. STANDARD
http://dev.w3.org/html5/spec/

28. <header> <aside>
<audio> <video>
MARKUP

29. Server-sent Events
WebSockets
WebWorkers
COMMUNICATIONS

30. SERVER-SENT EVENTS
Opera, 2006

31. http://dev.w3.org/html5/eventsource/
???

32. Simple API

33. REQUEST
GET /Events HTTP/1.1
Accept: text/event-stream

34. RESPONSE
HTTP/1.1 200 OK
Content-Type: text/event-stream

35. DATA
HTTP/1.1 200 OK
Content-Type: text/event-stream
data: My messagenn

36. MULTILINE DATA
HTTP/1.1 200 OK
Content-Type: text/event-stream
data: first linen
data: second linenn

37. JSON DATA
HTTP/1.1 200 OK
Content-Type: text/event-stream
data: {n
data: "msg": "hello world",n
data: "id": 12345n
data: }nn

38. ORDER (ID + DATA)
HTTP/1.1 200 OK
Content-Type: text/event-stream
id: 1234n
data: first datann
id: 1235n
data: second datann

39. EVENT NAMES
HTTP/1.1 200 OK
Content-Type: text/event-stream
event: updaten
data: {"msg": "First message"}nn
event: userlogonn
data: {"username": "John123"}nn

41. IT JUST WORKS!

42. SERVER CLIENT

43. WEBSOCKETS

44. http://dev.w3.org/html5/websockets/
http://bit.ly/9ioTAl

45. http://www.websockets.org/
WEBSOCKETS
“WebSockets is a technology
providing for bi-directional,
full-duplex communications
channels, over a single Transmission
Control Protocol (TCP) socket,
designed to be implemented in
web browsers and web servers.”
--wikipedia

46. SERVER CLIENT

47. Simple API

48. Simple API

49. Simple API

50. WS://
WSS://

51. HANDSHAKE

52. DATA FRAME
0x00”...UTF-8...”xFF

53. Not
Easy

54. NEED PATCHING

55. Server-sent
WebSockets
Events
Direction
Cross-domain Same-Origin
Own Format
Order
Data 00......FF Data: ........¥n
Easy

56. HOW TO CHECK ?
?

57. Modernizr

58. http://zh.github.com/html5test.html

59. HOW TO USE ?

61. HELLO
WORLD

62. WHAT
YOU
WANT?

63. USE READY BLOCKS

64. http://websocket.org/echo.html
ws://echo.websocket.org

65. FUTURE?
?

66. EVENTSOURCE
WEBSOCKET

67. EVENTSOURCE
WEBSOCKET

68. EVENTSOURCE
WEBSOCKET

69. EVENTSOURCE
WEBSOCKET

70. http://www.chromium.org/spdy
( SPeeDy )

71. chrome://net-internals

73. TWT Stream
#devlove

74. TWT Stream
#devlove
WebSockets
Web Frontend
( JavaScript )

75. TWT Stream
#devlove
WebSockets Redis
Web Frontend
( JavaScript )

76. MATZ HEROKU

77. Web Frontend
( JavaScript )
gem install heroku
heroku create my-app
git push heroku master

79. http://pusher.com/

80. WebSockets
Web Frontend
( JavaScript )
heroku addons:add pusher

81. http://redistogo.com/

82. WebSockets Redis
Web Frontend
( JavaScript )
heroku addons:add redistogo

83. Twitter Stream API
#devlove
WebSockets Redis
Web Frontend
( JavaScript )

84. http://devlove.heroku.com/

85. Thank you!