Twitter!

Ajax+Streaming API

Posted at 2010/03/09T20:38:37Z.

Ajax+Streaming APIのテスト

@itochan315が「JavaScriptでStreaming APIなんて余裕だろ」などと言っていたんでやってみたよん。
中身は意外と単純。

こんな感じに動くよ

動作画面

実行中はこんな感じ。レン鯖でやると怒られそうだからlocalhostにて。
コードは以下に。

クライアント側(Ajax)

window.onload=function (){
	var ajax=new XMLHttpRequest();
	ajax.open("GET","streaming.php");
	ajax.onreadystatechange=function (){

		if(ajax.readyState>=3)
		{
			var area=document.getElementById("tw");
			var lines=ajax.responseText.split("\n");
			var line=lines[lines.length-2];

			if(line)
			{
				var data=eval("("+line+")");
				var item=document.createElement("li");
				item.innerHTML="<strong>"+data.user.screen_name+"</strong>: "+data.text;
				area.insertBefore(item,area.firstChild);
			}

		}

	};
	ajax.send(null);
};

クライアント側(HTML)

<!DOCTYPE html>
<html lang="ja">

	<head>
		<meta charset="utf-8" />
		<title>Ajax+Streaming API</title>
		<script type="text/javascript" src="streaming.js"></script>
	</head>

	<body>

		<h1>Ajax+Streaming API</h1>

		<ul id="tw"></ul>

	</body>

</html>

サーバー側(PHP)

<?php

$stream=fopen("http://"./* ユーザー名 */.":"./* パスワード */."@stream.twitter.com/1/statuses/filter.json?track=RT","r");

while($data=fgets($stream))
{
	$t=json_decode($data,true);

	if($t["user"]["lang"]!="ja")continue;
	echo $data;
	ob_flush();
	flush();
}

ajax.readyState==3の状態で、statelessな通信が出来る。
応用していろいろ作れそうだけど、サーバー側に負荷がかなり掛かる。
twitterのサーバーが強化されてクロスドメインでもアクセス出来るようになる日を待ちましょう。