少ないデータ量なら COMET Streaming で対応できるが...

もちろん、通常のXMLHttpRequest でも chunked transfer encoding なデータを受け取ることはできますし、データの受信が進むたびに progress イベントが発生しますので、受け取るデータが少量の場合はなんとかなります。 詳しくは以下のページをご覧ください。

• COMET Streaming in Internet Explorer - EricLaw's IEInternals - Site Home - MSDN Blogs

しかしながら、受け取ったデータはXMLHttpRequest の接続が終了するまでXMLHttpRequest オブジェクトの中にため続けられますので、長時間 HTTP 接続を保ったまま、送られてきたデータを都度処理していく というようなことができません。 データがどんどんたまっていきますので、やがてメモリ不足になってしまいます。

具体的には、Twitter が Streaming API を chunked transfer encoding で送ってきます ので、XMLHttpRequest でTwitter StreamingAPI を扱いたい場合に困りますね。

IE 10 の拡張された XHR なら HTTP のストリーミングも扱える

まあ普通のブラウザ上でTwitter の StreamingAPI なんて使えなくてもいいでしょ、って感じもしますが、最近はブラウザの拡張機能やら Windows ストアアプリ (旧称 Metro アプリ) やらでJavaScript からTwitter StreamingAPI を使いたくなることがしばしばあります。 というわけで、Windows ストアアプリをJavaScript で書くときに使える IE 10 の拡張されたXMLHttpRequest を使って、chunked transfer encoding で送られてきたデータを都度処理していく方法について書いておきます。

サンプルコード

Windows ストアアプリ開発時に使えるサンプルコードとして、WinJS.xhr (XMLHttpRequest を扱う便利関数) で HTTP ストリーミングを扱う例を示します。

varuri ="http://www.example.com/test_stream";WinJS.xhr({ url:uri, responseType:"ms-stream"}).then(function (req){// 完了したときの処理// ...},function onError(err){// エラーが発生した時の処理// ...},function onProg(req){// streaming の読み込みを開始した時に以下の if 文の中に入るif (req.readyState === req.LOADING){// res は MSStream オブジェクトvar res = req.response;// msDetachStream メソッドを呼び出すことで IInputStream オブジェクトを res から切り離して取り出すvar stream = res.msDetachStream();// さらに stream からデータを読み込む処理に移る// ...}}).done(null,function (err){// 例外発生時の処理// ...});

余談 : その他のストリーミング関係の話

JavaScript でTCP/IP 上のストリーミングを扱うならば、HTTP の chunked transfer encoding を使うよりも以下の 2 つのどちらかを使う方が便利な気がします。Twitter StreamingAPI のようにサーバー側がすでに存在している場合はどうしようもないですが、新たに (サーバー側も含めて )Twitter StreamingAPI みたいなものを実装するのであれば、Server-Sent Events を使うのが良さそうです。

• Server-Sent Events : HTTP 上で動作; サーバーからの push 配信を受け取る
• WebSocket : TCP 上で動作; クライアントとサーバーの双方向通信

*1:もしくは IInputStream からデータを読み出すためのオブジェクトを操作することで