xhr2 steaming + twitter with iPad

7,380 views

Published on

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

No Downloads
Views
Total views
7,380
On SlideShare
0
From Embeds
0
Number of Embeds
134
Actions
Shares
0
Downloads
12
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

xhr2 steaming + twitter with iPad

  1. 1. Xhr2 streaming + Twitter w/ iPad<br />2010/5/27(thu)<br />「HTML5 : W3C Widget とその応用を考える会」<br />こまつ けんさく(@komasshu)<br />
  2. 2. 自己紹介<br />名前:こまつ けんさく<br />勤務先:NTTコミュニケーションズ<br />Twitter : http://twitter.com/komasshu<br />Blog : http://blog.livedoor.jp/kotesaki/<br />
  3. 3. Demo<br />Twitter streaming api + iPad<br />
  4. 4. Overview<br />Web<br />Server<br />(apache)<br />xhr2 <br />streaming<br />Streaming<br />api<br />HTML5/CSS3<br />w/ iPad<br />
  5. 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. 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. 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. 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. 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. 10. Thank you!!<br />

×