WIZ-CODE.blogMENUWIZ-CODE.blogについてWIZ-CODE.blogJavaScriptやAjaxをテーマとしたブログです。2011/09/16今回はAjaxストリーミングの実装を具体的に見ていこうと思います。ストリーミングの方法はブラウザによって違いがあり、それがかなり厄介でした。Explorerは、バージョン8でようやくストリーミングが可能になったばかりで、それより前のバージョン(6、7)ではひとつのHTTPコネクションで複数のレスポンスを得るといったことができず、ロングポーリング(Comet)といった手法で代替するしかありません。IEを除くと、FirefoxやChromeの最新バージョンは問題ありません。これらもバージョンが古いと正常に動作しないかもしれません。このようにAjaxストリーミングのクロスブラウザ化はかなり困難さを伴うものであるようです。ひとつの簡単なサンプルを作ることにしました。サーバーサイド(PHP5)でデータを小出しにするコードを書いて、それをクライアントサイドのAjaxで逐次受け取るというものです。データは1秒ごとに何件の処理を完了したかを出力する単純なものです。この二つがキモとなる部分で、XmlHttpRequestでストリーミング受信するためにサーバー側でこのように設定します。ストリーミング送信を使うと、ブラウザによってデータにある程度のサイズがないと出力されないという仕様があり、データの前に何キロバイトかの空白をつけたりして対策するようですが、Content-typeをtext/event-streamやapplication/octet-streamなどとすればいいようです。Transfer-encodingをchunkedとすることで、XmlHttpRequestのreadyStateが3のとき、つまりデータ送信中の時点でもデータを受け取ることができるようになります(通常のAjaxではreadyStateが4のときに処理をします)。\r\n)をつけて記述します。データ出力がすべて終了したら、チャンクの区切りを表す”0′′と改行文字を出力して終わりです。次にこれを受け取るクライアント側のコードを書いてみます。簡略化のためにライブラリのPrototype.jsを使用しています。id=”console”></div>が記述されていれば確認できます。通常readyStateが3のときであるInteractiveな状態では、ブラウザによって実装が異なるので、その使用は非推奨とされていました。今回はストリーミング中のデータ受信を扱っているので、Interactiveな状態のときにデータを受け取れるonInteractiveコールバック関数に処理を書いています。ここでOperaですが、他のブラウザと異なりreadyStateが3のときにInteractiveイベントが発生しないことが明らかになっています。XHRレスポンスはしっかりとストリーミング的に返すので、setIntervalなどのタイマーで定期的にレスポンスにアクセスしていくことで対処が可能です。id:anatooのブログで具体的なコードが挙げられています。Explorerのコードを見ていきます。現段階ではストリーミングが可能なバージョン8以上を対象にしています。IEはバージョン7以上からすでにXmlHttpRequestクラスを実装しているものの、Interactive状態でレスポンスを返さないので、ストリーミングにXmlHttpRequestクラスを使用することができません。代わりにIE8の独自実装であるXDomainRequestクラスを使うと、ストリーミング通信ができます。現段階ではローカルのみでテストしています。いうのも、自分のローカル環境ではしっかり動作するものの、サーバーに置いてみるとうまく動作しないためです。自分はレンタルサーバーを使用しているので、おそらくPHP.iniや.htaccessなどの設定がローカルとサーバーで違うのが原因だと思います。コード自体は間違っていないと思うので、とりあえずPHPとJavaScriptコードを載せておきます。IEでキモとなるのがこのAccess-Control-Allow-Originです。1では無理だったクロスドメイン通信を実現できます(あまり使われてないような気がしますが)。ここではクロスドメイン通信するわけではないですが、XDomainRequestを使用するのに必要な設定のようです。このときContent-typeはtext/plainとする必要があります。英語サイトですがこちらのページにtext/plainにしなさいみたいなことが何となく書かれています。それとは別に同じサイトのこのページにも有用なことが書かれていますので参考にしたいです。その他、バッファのデータサイズが2KB(2048バイト?)以上ないと出力されない仕様のため、2KB分の空白を前もってくっつける形にしています。IE用のJavaScriptコードではまずXDomainRequestオブジェクトが存在するか確認してから処理を始めます。レスポンス内容はXHRと同じくresponseTextプロパティに入ります。IEバージョンについては今後サーバーでも動くように設定を見直す予定で、それができ次第報告します。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。AdImageZoomerのドキュメントページ作りましたズーム系のjQueryプラグインです。...JavaScripter目指してJavaScriptでどこまでできるか。そんなチャレンジャーのブログです。前回紹介した宇宙フライトシミュレーションに、いくつかの機能を追加しました。音楽プレイヤーカテゴリーJavaScript/AjaxPHPTipsゲームブラウザアーカイブ2018年7月2017年7月2016年12月2016年11月2016年10月2016年3月2016年1月2015年12月2015年11月2015年10月2015年9月2015年8月2014年7月2014年6月2014年4月2014年2月2014年1月2013年12月2013年10月2013年8月2013年6月2013年4月2013年3月2013年1月2012年11月2012年8月2012年6月2012年5月2012年4月2012年3月2011年12月2011年10月2011年9月2011年8月2011年7月2011年6月2011年5月2011年4月2011年3月2011年2月2011年1月2010年12月2010年11月2010年10月2010年9月2010年6月2010年5月2010年4月2010年2月2010年1月2009年12月2009年11月2009年10月PHPとJavaScriptでAjaxストリーミングを実装中JavaScriptやAjaxをテーマとしたブログです。