Your SlideShare is downloading. ×
0
xhr2 steaming + twitter with iPad
xhr2 steaming + twitter with iPad
xhr2 steaming + twitter with iPad
xhr2 steaming + twitter with iPad
xhr2 steaming + twitter with iPad
xhr2 steaming + twitter with iPad
xhr2 steaming + twitter with iPad
xhr2 steaming + twitter with iPad
xhr2 steaming + twitter with iPad
xhr2 steaming + twitter with iPad
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

xhr2 steaming + twitter with iPad

7,048

Published on

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

No Downloads
Views
Total Views
7,048
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Xhr2 streaming + Twitter w/ iPad<br />2010/5/27(thu)<br />「HTML5 : W3C Widget とその応用を考える会」<br />こまつ けんさく(@komasshu)<br />
  • 2. 自己紹介<br />名前:こまつ けんさく<br />勤務先:NTTコミュニケーションズ<br />Twitter : http://twitter.com/komasshu<br />Blog : http://blog.livedoor.jp/kotesaki/<br />
  • 3. Demo<br />Twitter streaming api + iPad<br />
  • 4. Overview<br />Web<br />Server<br />(apache)<br />xhr2 <br />streaming<br />Streaming<br />api<br />HTML5/CSS3<br />w/ iPad<br />
  • 5. xhr(Xml Http Request) streaming<br />GET<br />Web<br />Server<br />browser<br />HTTP<br />Data<br />GET<br />xhr streaming<br />〜Server-Sent<br />Event〜<br />Web<br />Server<br />browser<br />Data<br />Data<br />Data<br />Upgrade<br />Web<br />Socket<br />Server<br />browser<br />Data<br />Data<br />Data<br />Web Socket<br />Data<br />Data<br />Data<br />
  • 6. How to send? (flush)<br />print cgi.header(<br />"type"=>"text/event-stream”,<br /> "Access-Control-Allow-Origin"=>"*”,<br />"Access-Control-Allow-Methods"=>"GET”)<br />while1<br />ifcurr != cache['pos']<br /> ……<br /> print"data: "+message+"¥n”<br />STDOUT.flush<br />end<br />end<br />
  • 7. How to receive? (xhr2 streaming)<br />※ iPad/iPhone<br />xhr = new XMLHttpRequest();<br />xhr.open('GET', url, true);<br />xhr.onreadystatechange= function() {<br />if(xhr.readyState > 2 && xhr.readyState < 5) {<br /> messages = xhr.responseText.substring(lastSize).split(“¥n");<br />lastSize= xhr.responseText.length;<br />if (arr = messages[i].match(/^data:[ ]?({.+?})/)) {<br />show(arr[1]);<br />}<br />}<br />if(xhr.readyState == 4) {<br />}<br />}<br />xhr.send(null);<br />
  • 8. How to receive?(Server-Sent-Event)<br />※ Webkit nightly / Chromium<br />vareventSource = new EventSource("/cgi-bin/test.cgi");<br />eventSource.onmessage = function(e){<br />messages = e.data.split(“¥n");<br />varlen = messages.length;<br />for (vari = 0; i < len; i++) {<br />show(messages[i]);<br />}<br />}<br />
  • 9. How to draw?(CSS3 animation)<br />@-webkit-keyframestraverse_l{<br />0%{opacity: 0.2;<br /> -webkit-transform: translate(-600px,0px);}<br />50% {opacity: 1.0;<br /> -webkit-transform: translate(150px,0px);}<br />100% {opacity: 0.2;<br /> -webkit-transform: translate(900px,0px);} <br />}<br />.traverse_l{<br />-webkit-animation-name: traverse_l;<br />-webkit-animation-duration: 5s;<br />}<br />varobj = document.createElement('div');<br />obj.innerHTML= '<b>' + info.user + '</b>&nbsp;' + info.text;<br />obj.setAttribute('class', 'traverse_l’);<br />setTimeout(function(){<br />lists.removeChild(obj);<br />}, 5000);<br />
  • 10. Thank you!!<br />

×