JavaScriptとサーバーでのやり取り

質問

サーバー側で常にアップデートされてるデータにAJAXを使ってアクセスして、そのデータに基づいてブラウザー画面に＜CANVAS>を使って直線を引くルーチンを作っていますが、理解できない現象が起きて困っています。

サーバー側ではデジタル回路の任意の８ポイントからのデータを１バイトにまとめてファイルを作り、数ミリ秒ごとに新しいデータに書き換えています。

ブラウザー側では、サーバーで常に更新されてるデータファイルに記録されているデータをAJAXで取得し、添付した写真（１）のように、横に１０分割、縦に８分割してあるキャンバスの各コマにそのデジタル信号を時系列的に左から右へ流れるように表示できるようにしてあります。

ブラウザー側のJavascriptコードは長くなり、この質問欄に入りきらないので、要点だけを書きますと、次のような構成になっています。

for(i=0; i<10; i++)
{
AJAX　で一番目のコラム用のデータを要求
　　do{
requestObject.onreadystatechange=function() // ----- (!)
{
if(requestObject.readyState==4 && requestObject.status==200) // ----- (2)
{
目的のデータ取得
　　for(j=0; j<8; j++)
{
j ビット目の"１"か"０"かによって高さの異なる水平線を描画
}
} // ---- (2)
} // --- (1)
} while( !requestObject.onreadystatechange);
//window. alert("waiting");
} // end for(i)

これで縦に８個並んだロジック信号を１０列表示しようと思っているわけですが、結果は一番左のマスの左端にパルスの立ち上がり部分がかすかに表示されるだけです。（写真１）途中のマスには何も表示されません。
ところが、　window.alert("waiting"); の部分のコメント記号を外すと、alert　ボックスが現れてOKボタンを押すたびに、各マスに線が引かれていきます。写真２はこうして７マス目まで描いたものです。
今回サーバーから取ってきたデータは"10010110" という固定のデータで、全ての列で同じになってますが、データがリアルタイムで書き換えられているときはそれなりの変化のある形になってます。
要はタイミングの問題だろうと考えて、alert() の代わりに for　ループを使った時間稼ぎを入れてみましたが、ループの回数をどんなに変えてみても、結局何も表示されません。

どうすればちゃんとした線が引けるのか、どなたか知恵を貸していただけませんか。
よろしくお願いします。

回答No.1

t_ohta · ベストアンサー

時間稼ぎを for 文のループではなく setTimeout に変えたらどうでしょう。
for文で回っている間は他の処理の割り込みが発生せず、ひたすらfor文の処理が動いてしまい時間稼ぎになっていない場合があります。
alertで上手く行くのは、ブラウザにalertが表示されて「OK」が押されるのを待っている間は、その部分の処理が止まり、他の処理が割り込める状態となっているためAjax側の処理が実行されていきます。
setTimeoutを使えば、指定した時間の間メインの処理が止まって、待ちになっていた他の処理が実行されるので、alertが表示されユーザーが「OK」を押すのを待っているのと同じような状態にすることができます。

お礼

早速ご回答いただき、有難うございます。
外側の　for　ループを外して、内側全体を関数にしてこのルーチンの外側に置き、外側のfor ループがあった場所に　setTimeout( ) をおいて、一定期間ごとにこの関数を呼ぶ形にしてやってみます。

回答No.3

b0a0a

forで回すのはおかしいですね

お礼

早速のご回答、有難うございます。
for ループを使わない方法を今試しています。

回答No.2

noname#177743

直接の回答になっていなくて恐縮なのですが……。

どうも、見たところ、サーバーと常時接続を維持して表示を更新させていくようなことを考えているように思えるのですが……。Ajaxは、非同期にサーバーにアクセスして結果を受け取る、それだけのものです。常時接続を維持してデータを受信し続けるようなものではありません。そこに設計上の問題がありはしないでしょうか。

そうした処理は、Server-Sent Eventなどのほうが向いているように思えました。本格的に常時接続による双方向通信を行うのであればWeb Socketという技術がありますが、専用のサーバーが必要などちょっと敷居が高いです。このあたり調べてみてはいかがでしょう。

参考ページ
http://libro.tuyano.com/index3?id=872003

お礼

早速回答いただき、有難うございます。
これは学校のプロジェクトでやっているもので、本格的なシステムを作ろうとしているわけではありません。Ajaxが非同期なのは知ってますが、ほかのルーチンでも同じような形で常時アクセスして正弦波を再生したり、FFTを使って周波数スペクトルを表示できたりしています。サーバー側のデータさえ用意できていればいつでも（時々でも常時でも）アクセスできると思ってやっています。