• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Push the web with HTML5
 

Push the web with HTML5

on

  • 2,077 views

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

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

Statistics

Views

Total Views
2,077
Views on SlideShare
2,070
Embed Views
7

Actions

Likes
2
Downloads
17
Comments
0

4 Embeds 7

http://www.hanrss.com 4
http://localhost 1
http://twitter.com 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Push the web with HTML5 Presentation Transcript

  • PUSH THE WEB with HTML5
  • BULGARIA
  • http://en.wikipedia.org/wiki/ Music_of_Bulgaria
  • REAL TIME WEB
  • RSSKING OF THE WEB
  • HARMONY
  • THEN THEY COME...
  • TOO FAST
  • TOO CROWDED
  • POLLING IMPOSSIBLE
  • PUSH!
  • PROBLEM ?
  • CURRENT WEB (HTTP) Request Response Close
  • SERVER TO SERVER PubSubHubBub XMPP
  • SERVER TO BROWSER Polling Long Polling Streaming
  • Too complicated
  • COST
  • STANDARDhttp://dev.w3.org/html5/spec/
  • <header> <aside><audio> <video> MARKUP
  • Server-sent Events WebSockets WebWorkersCOMMUNICATIONS
  • SERVER-SENT EVENTS Opera, 2006
  • http://dev.w3.org/html5/eventsource/ ???
  • Simple API
  • REQUESTGET /Events HTTP/1.1Accept: text/event-stream
  • RESPONSEHTTP/1.1 200 OKContent-Type: text/event-stream
  • DATAHTTP/1.1 200 OKContent-Type: text/event-streamdata: My messagenn
  • MULTILINE DATAHTTP/1.1 200 OKContent-Type: text/event-streamdata: first linendata: second linenn
  • JSON DATAHTTP/1.1 200 OKContent-Type: text/event-streamdata: {ndata: "msg": "hello world",ndata: "id": 12345ndata: }nn
  • ORDER (ID + DATA)HTTP/1.1 200 OKContent-Type: text/event-streamid: 1234ndata: first datannid: 1235ndata: second datann
  • EVENT NAMESHTTP/1.1 200 OKContent-Type: text/event-streamevent: updatendata: {"msg": "First message"}nnevent: userlogonndata: {"username": "John123"}nn
  • IT JUST WORKS!
  • SERVER CLIENT
  • WEBSOCKETS
  • http://dev.w3.org/html5/websockets/ http://bit.ly/9ioTAl
  • 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
  • SERVER CLIENT
  • Simple API
  • Simple API
  • Simple API
  • WS://WSS://
  • HANDSHAKE
  • DATA FRAME0x00”...UTF-8...”xFF
  • NotEasy
  • NEED PATCHING
  • Server-sent WebSockets Events DirectionCross-domain Same-OriginOwn Format Order Data 00......FF Data: ........¥n Easy
  • HOW TO CHECK ? ?
  • Modernizr
  • http://zh.github.com/html5test.html
  • HOW TO USE ?
  • HELLOWORLD
  • WHAT YOUWANT?
  • USE READY BLOCKS
  • http://websocket.org/echo.html ws://echo.websocket.org
  • FUTURE? ?
  • EVENTSOURCE WEBSOCKET
  • EVENTSOURCE WEBSOCKET
  • EVENTSOURCE WEBSOCKET
  • EVENTSOURCE WEBSOCKET
  • http://www.chromium.org/spdy ( SPeeDy )
  • chrome://net-internals
  • TWT Stream #devlove
  • TWT Stream #devlove WebSocketsWeb Frontend ( JavaScript )
  • TWT Stream #devlove WebSockets RedisWeb Frontend ( JavaScript )
  • MATZ HEROKU
  • Web Frontend ( JavaScript )gem install herokuheroku create my-appgit push heroku master
  • http://pusher.com/
  • WebSockets Web Frontend ( JavaScript )heroku addons:add pusher
  • http://redistogo.com/
  • WebSockets Redis Web Frontend ( JavaScript )heroku addons:add redistogo
  • Twitter Stream API #devlove WebSockets RedisWeb Frontend ( JavaScript )
  • http://devlove.heroku.com/
  • Thank you!