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 />