2009/10/13

javascriptで動くtwitter streamクライアントを作るならばmultipart/mixedを使うべき

twitter stream APIとは、twitterのステータス更新に対してキーワードでtrackしたり、あるグループ内に属するステータス更新をフィルタしたり出来るAPIなのだけど、実際にはchunkedなストリームが流れて来ているのであって、これを使ったWebアプリを作る際にはlong pollを使うのが良い。ただしクライアントサイドでjavascriptを処理する際に

サーバサイドでステータス更新をFIFOに溜め込む
クライアントからリクエストをブロック(long poll)しFIFOからステータスを送出する
クライアントサイドでlong pollを行い画面を更新する
再度サーバへリクエストを投げる

を繰り返すのであれば、せっかくストリームなのにアプリサーバとの接続を切ってしまう事になる。出来ればクライアントからWebアプリもストリーミングとしたい。しかしながらサーバからのステータス更新を受け取るのであれば、JSON/JSONPなアクションが必要になる。
ここで使える！と思ったのがmultipart/mixedです。

multipart/mixedはboundaryで区切られたボディ部を繰り返し送出する際に用いられる仕組みで、実はXHR(XMLHttpRequest)はこのmultipart/mixedなレスポンスを受け取る事が出来る。
受け取るとは言っても、実際にはreadyStateが変化する...でしかないのだけど、これを扱うのに良いライブラリがある。
diggで使われているDUI.jsとStream.jsです。

digg's stream at master - GitHub

Alpha repository for DUI.Stream. When it stabilizes, it will be merged back into DUI
http://github.com/digg/stream

このstreamライブラリは内部でreadyStateが3になるのを待ち、タイマを張ってboundaryを監視するものです。つまり1 body部を扱う事になるので、使う際にはmime typeを指定する事になります。

var s = new DUI.Stream();
s.listen('text/html', function(payload) {
...
});
s.load('/push');

この仕組みを使って、twitterからのストリームをクライアントにmultipart/mixedで送出し、かつクライアントも接続を保持したままレスポンスを受け取るのです。接続を切らないので、ほぼタイムロス無しのリアルタイムと言って良いでしょう。
今日はこれをsinatraを使って実装してみました。出来れば一度動かしてみて下さい。これまでリクエストを繰り返し送っていたアプリケーションと比べてスムーズにデータを受け取っているのが分かって頂けるかと思います。
上記diggのライブラリを作業フォルダのstatic/jsフォルダ配下に置き、以下のファイル(fast-twitter-stream.rb)を作業フォルダ直下に置きます。

require 'rubygems'
require 'sinatra'
require 'json'
require 'tweetstream'
require 'pit'

# doesn't work on thin and webrick
set :server, 'mongrel'
set :public, File.dirname(__FILE__) + '/static'

config = Pit.get("twitter.com", :require => {
    "username" => "your username in twitter",
    "password" => "your password in twitter"
})

get '/' do
  <<HTML
  <html> <head>
    <title>Server Push</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="/js/DUI.js"></script>
    <script type="text/javascript" src="/js/Stream.js"></script>
    <script type="text/javascript">
    $(function() {
      var s = new DUI.Stream();
      s.listen('text/javascript', function(payload) {
        var status = eval(payload);
        $('#content').append('<p>' + status.text + '</p>');
      });
      s.load('/push');
    });
    </script>
  </head>
  <body>
    <h1>Server Push</h1>
    <div id="content"></div>
  </body>
</html>
HTML
end

get '/push' do
  boundary = '|||'
  response['Content-Type'] = 'multipart/mixed; boundary="' + boundary + '"'

  MultipartResponse.new(boundary, 'text/javascript')
end

class MultipartResponse
  def initialize(boundary, content_type)
    @boundary = boundary
    @content_type = content_type
  end

  def each
    TweetStream::Client.new(config[:username], config[:password]).sample do |status|
      yield "--#{@boundary}\nContent-Type: #{@content_type}\n(#{status.to_json})"
    end
  end
end

元となったコードはyoupyさんの物を参考にさせて頂きました。

ブラウザから"http://localhost:4567/"にアクセスすると、もの凄い勢いでステータスが追加されていくのが分かるかと思います。しかも切断していないのでかなり高速です。
お試しの効果には個人差があります。

このmultipart/mixed、結構使えるなーと思いました。得にリアルタイムな画像ストリーミングとして送出したり、リアルタイム電光掲示板の様な物にも使えるかと思います。

今回のサンプルもgithubに置いてあります。

mattn's fast-twitter-stream at master - GitHub

fast twitter stream client using multipart/mixed.
http://github.com/mattn/fast-twitter-stream

よろしければご参考までに。

JavaScript & Ajax プロが教える“本当の使い方”
MdN編集部
MdN / ￥ 2,940 (2009-07-31)

発送可能時間：在庫あり。

Posted at 01:06 in ソフトウェア::lang::javascript | WriteBacks (2)
Tagged as: javascript
Bookmarks:

2009/08/25

バッチファイルで簡易Webサーバを起動する。

ネタ的にはZIGOROuさんかhasegawaさんのネタっぽいが...

@if(0)==(0) ECHO OFF
CScript.exe //NoLogo //E:JScript "%~f0" %*
GOTO :EOF
@end

function wsock_ConnectionRequest(reqId) {
    if (socket.State != 0/* closed */) socket.Close();
    socket.Accept(reqId);
}

function wsock_DataArrival(bytesTotal) {
    var data = script.Run('GetData', socket, bytesTotal);
    socket.SendData([
        "HTTP/1.1 200 OK",
        "Connection: closed",
        "Content-Type: text/html;",
        "",
        "Hello World! " + new Date(),
        ""
    ].join("\n"));
    // 相手が閉じてくれないので閉じたいけど待たないとレスポンスが無くなる
    WScript.Sleep(1000);
    socket.Close();
    socket.Listen();
}

var socket = WScript.CreateObject('MSWinsock.Winsock', 'wsock_');
var script = WScript.CreateObject('ScriptControl');
script.language = 'VBScript';
script.AddObject('WScript', WScript);
script.AddCode([
    'Function GetData(socket, bytesTotal):',
    '  Dim data:',
    '  socket.GetData data, vbString, bytesTotal:',
    '  GetData = data:',
    'End Function'
].join(''));

socket.Bind(8080);
socket.Listen();
while (socket.State != 9/* error */) {
    WScript.Sleep(100);
}

// vim:set ft=javascript:

GetDataがByRefなので、ScriptControlを使ってます。

Posted at 11:51 in ソフトウェア::lang::javascript | WriteBacks (0)
Tagged as: javascript, wscript
Bookmarks:

twitter.bat

なるほど。

JScript でハマる日々 - m2

@if(0)==(0) ECHO OFF
CScript.exe //NoLogo //E:JScript "%~f0" %*
GOTO :EOF
@end

http://d.hatena.ne.jp/miya2000/20090823/p0

CScript用shebangすな。
いままでバッチファイルでネットワーク扱うならcurl使ってたけど、curlインストールされてないマシンで他の人に使ってもらうなら、標準で入ってるだろうCScriptやXMLHTTPが使えてウマーなのではないだろうか。

ちなみにvimmerならmodelineでjavascriptにしとくと良いね。

Posted at 09:39 in ソフトウェア::lang::javascript | WriteBacks (0)
Tagged as: javascript, twitter, バッチファイル
Bookmarks:

2009/08/16

XSLTを使ったAmazon最速検索が動くようになった。

furyu-teiさんの記事でXSLTの場合はendpointを変えないといけない事が分かった。

AmazonのProduct Advertising API認証プロキシ(REST版・GAE用)ソース

XSLTを使用する場合(Styleオプション指定時)、http://webservices.amazon.co.jp/onca/xmlやhttp://ecs.amazonaws.jp/onca/xmlで指定すると認証エラーに。専用のエンドポイント(http://xml-jp.amznxslt.com/onca/xml)の指定が必要らしい。
http://d.hatena.ne.jp/furyu-tei/20090703/paproxy

お陰様で動くようになりました。