サーバー状態リアルタイム表示について

質問

お世話になります。
（今夏休み中ですが休み前に大きな宿題を出されてしまい、家で構想だけ練っています）

某システムで、ｃgiアプリをc++で作成しています。
現webシステムは最新の状態を表示させるには「再表示」ボタンなどを押すことで実現しています。

が、今回は追加機能で、ある状態の最新情報をボタンクリック無しで表示してほしいというのです。
本当は状態が変わったときにpopup表示を希望されたのですが、それは無理ということにしてもらいました！

ajaxとかnodeとか、理解できれば簡単なことなのかもしれませんが
期間的にもちょっと無理そうだし、

部分的な表示じゃなくて全画面の再表示をしたとしても
同じ画面では、何か他の既存の処理に影響を与えないか不安だし、、、

なるべく工数かけず、自分で今、出来る範囲で実現したいと思っています。

で、今　以下のようなアルゴリズムを考えました。

１．cgiで、画面(main)を出力する最後に、
　　結果を監視するプロセス（別cgiアプリ、以降b.exe）を起動（createprocess）しておき、
　　結果状態表示用にwindows.openで小さな別窓を表示させ、 ←popupもどき！
　　結果のhtml（以下c.html）を表示する。

　　※c.htmlは最初は静的に用意しておき「監視開始」みたいな表示？！

２．b.exeは最新の結果状態を表示するｈｔｍｌをc.htmlというファイル名で所定のフォルダーに
　　（例えば）５秒単位に作成する。

３．c.htmlは　reloadまたはメタタグでrefresh設定しておく。

４．mainの画面を閉じるときはb.exeをkillし、c..htmlを削除する。
　　→　異常系、どうしよう？？？
　　　　もしb.exeが生き残ってたらどうなる？
　　　　　　個別にcreateprocessしないで、システム的に常駐させ、
　　　　　　c.html作り続けたほうが良い?!
　　　　もしc.htmlが消せなかったら、、c.htmlを作成するときに一旦削除してからにすればOK?!

こんな感じで実現出来るかな、、、と思ってるのですが、
どう思われますか？

調べていくうちに、ajaxを使って、
　　http://okwave.jp/qa/q6265223.html
　　のベストアンサー
のようなことなら、今の自分にも出来るかな、、、　などと思っています。

周りに相談できる人が皆無なので、いつも御世話になってしまい、すみません。
アドバイス、お願いいたします。

または　他の方法など、もしアドバイスしていただけると助かります。

宜しくお願いします。

回答No.3

anmochi · ベストアンサー

> popupもどきというのは、お客さんはポップアップを望んでいるのですが、
> 既存システムのweb画面上に追加してpopupするのは難しい、、、ということ。
うーん。よく分からんけど最近のWebメールやOffice Web Appsなどのように、ブラウザ上で画面ががんがん分割されたりブラウザウィンドウの画面の中でダイアログのようなUIが出てくる奴のことを言っているのかな？
あれならjQuery＋jQuery UI プラグインで速攻できるよ。まぁ、ブラウザウィンドウの画面の上に動的に移動できるDIVのようなものを追加しているだけなのでリンクとかFORMポストとかで画面遷移があると消えてしまうけど。
だから現在のWebシステムに追加するのが難しいと言っているのかな？　それなら確かに難しそうだ。

> ここが良くわからないです。
> レスポンスボディというのは、cgiのexeがprintfで出力したhtmlのコードとは違うのでしょうか？
いや、それでいい。cgiのexeがprintfで出力したhtmlのコードがそのままレスポンスボディになる。
「レスポンスボディ」という言葉が指す意味が分からなければHTTPというプロトコルそのものを一度調べてみるといい。cgiをやるならHTTPがどういうものかというのはぜひ知っておくべきだ。

> urlで指定したCGIのEXEは状態を判断してその結果をhtml出力（printf）しようと思ってまして、
> それではダメですか？
ばっちぐー。

> それでOKの場合、
>> htmlなので、AJAXでリクエストしたレスポンスを
>> そのままHTMLとして扱う。
> ここはcgiの戻りがhtmlそのものなのでＯＫ？
いえーす。

> もし違うとしたら、exeで何を返せばいいのか？
> printfで出力して（返して）いいのか？
jQueryのajax関数でつっつくexeは普通にHTMLを返す普通のCGIでOKよ。

～～～～

さて、ANo.1でも言ったけど、javascript:window:open()で小ウィンドウを開くなら、そしてその小ウィンドウの中を定期的に全部リフレッシュするならAJAXは後回し（というか最終的に要らないかも）にして何秒かおきにリフレッシュさせるだけでいい。AJAXがー同期がー非同期がーごにょごにょーとか一切関係なしにjavascriptのsetTimeout()というのを使ってもいいし<meta http-equiv="refresh" content="60;URL=serverinfo.exe">でもいい。

お礼

anmochi さん、かなりすっきりしました～

JavaScriptのsetTiemout()ならすぐに使えそうです！^^;
METAタグのrefreshも簡単で何よりです。(^^)v

ajaxは後回しにして、といいますか、使わなくて良さげなので少し、肩の荷が下りました。

レスポンスボディ、httpプロトコルについて
勉強したいと思います！

エンドユーザはブラウザを使ってるという意識があまり無いように思います。
オフライン系のアプリと同じような操作を求めてきます。

ポップアップもalertのような軽い感じで！
って言われました。alertという言葉は私の憶測です。
（背景がグレーの小さな画面でいいよ、、、って）
リアルタイムで今の画面に？、今回はそれが難しいのに。。。そして周りは誰も難しいということをわかってくれない人たちばかり。。。^^;

で、ちょっと思ったのですが
window.openで表示する画面のonloadか何かで
結果をalertで表示しようと！
window本体の画面にも同じような内容を表示しておけばいいかな、とか。

で、調べたところ、
windowの最低サイズが幅:250、高さ:100らしく、
思ったより大きいということ、
なら、最初から「最小化」で表示、、、と思ったらそれはできないことがわかりました。

まっ、ＯＫかなと。

ホントに有難うございました！
コメントがあるかも知れないと思い（^^）
後ほどベストアンサーにさせていただきます。

回答No.2

anmochi

> 上記のサンプルコードですが、popupもどきで表示するhtml内に書くコードですよね？
「popupもどき」という言葉が何を指すかは分からない（ポップアップするのかしないのか）が
上記のサンプルはjavascript:window.open()や<a href="" target="_blank">では「ない」
本体のブラウザウィンドウで動作する事を想定している。

> で、refreshServerInfo() が定期的に実行される関数？
その通り。
そのへんの詳しい事情は「javascript setInterval」で検索すれば分かるだろう。

> その中のcgiが、自分に当てはめるとcgiのexe名。
> メソッドがGETで、cgiのexeが結果を記載したhtml（表示しているhtmlと同じ）を出力する？
結果を記載したHTMLというのがcgiが返すレスポンスボディという意味であればその通り。
jQueryのajaxという関数で引数dataType:htmlという指定をすると、urlで指定されたパスにAJAXでリクエストしたレスポンスをそのままHTMLとして扱う。

> ajaxを使うので、実際は全部再表示ではなくて、結果の部分だけ書き換わる？
うむ。
実際には、AJAXというのは本体とは別にHTTP通信を行う仕組みであり
画面の一部分を動的に変更する事自体はまた別の機能だ。
つまり、「AJAXで画面の一部を書き換える」というのは、
「JavaScriptでブラウザ本体とは別の独立したHTTP通信を行い、レスポンスを得る」
「JavaScriptでブラウザ本体のコンテンツの一部を任意のタイミングで書き換える」
の2つを連続して行う事で実現している。

> こんなイメージでいいでしょうか？
はい。

> ajaxは初めて使いますがjquery本体を最初に読み込んでおけばいいのですね？
ANo1で示したサンプルコードはjQueryの機能を使っているからで、
jQueryを読み込まないとAJAXできないという訳ではないという事は理解しておこう。
jQueryというのはブラウザ間のJavaScriptの挙動の違いを吸収したり
より便利にJavaScriptの機能をラップしたりするJavaScriptライブラリーであり、
あると便利なものだがjQueryじゃないと実現できないことというのは一つも無い。

お礼

anmochi さん、ありがとうございます。

popupもどきというのは、お客さんはポップアップを望んでいるのですが、既存システムのweb画面上に追加してpopupするのは難しい、、、ということ。

なので、今のweb画面の左上などに小さく別窓をオープンして、監視画面とすること。

で、小さな別窓を「もどき」と表現しました。

その、もどき画面を見て、その内容により、エンドユーザがメイン画面の操作を行います。

なので別ブラウザではダメなので、window.openで行おうと思います。

ajax、ちょっと勉強時間が必要かなと。
>結果を記載したHTMLというのがcgiが返す
>レスポンスボディという意味であればその通り。
>jQueryのajaxという関数で引数dataType:htmlという
>指定をすると、urlで指定されたパスにAJAXで
>リクエストしたレ>スポンスをそのままHTMLとして扱う。

ここが良くわからないです。
レスポンスボディというのは、cgiのexeがprintfで出力したhtmlのコードとは違うのでしょうか？

urlで指定したCGIのEXEは状態を判断してその結果をhtml出力（printf）しようと思ってまして、それではダメですか？

それでOKの場合、
>htmlなので、AJAXでリクエストしたレスポンスを
>そのままHTMLとして扱う。
ここはcgiの戻りがhtmlそのものなのでＯＫ？

もし違うとしたら、exeで何を返せばいいのか？
printfで出力して（返して）いいのか？

まだまだ先が長そうですが
よろしくお願いします。

回答No.1

anmochi

小窓出しっぱでその中をrefreshしていいんだったら毎回サーバーの状態を出すcgiをrefreshすればいいんでない？　定期的にHTML吐く方が読み書きが同時に起こったら云々等あれこれ考える必要があるような気がするぞなもし。

つーかそれが許されるんなら普通にブラウザ本体でその部分だけ定期的にajaxすればいいんでない？
jQueryの本体を読み込んだ後で以下のようにすれば、ページを読み込んだ直後にserverinfo.cgiの結果をserverinfoというIDを持つdivの中に埋め込んでくれて、後は1分ごとにserverinfoの中をリフレッシュしてくれる。serverinfo.cgiの中でimgタグを入れたいときは<img src="hoge.jpg?timestamp=yyyymmddhhmmss">みたいにHTMLが指し換わるたびにURLを変えるようにすればOK。

<script type="text/javascript">
function refreshServerInfo() {
$.ajax({
type: 'GET',
url: '/serverinfo.cgi',
dataType: 'html',
success: function(data) {
$("#serverinfo").html(data);
},
error:function() {
$("#serverinfo").html("error!");
}
});
}
$(function() {
refreshServerInfo();
setInterval("refreshServerInfo()", 60000);
});
</script>
<div id="serverinfo">
</div>

お礼

anmochi さん、ありがとうございます。
要領も呑み込みも悪いので、追加で質問させてください。

ajaxを使ってみようと思います！
上記のサンプルコードですが、popupもどきで表示するhtml内に書くコードですよね？

で、refreshServerInfo() が定期的に実行される関数？

その中のcgiが、自分に当てはめるとcgiのexe名。
メソッドがGETで、
cgiのexeが結果を記載したhtml（表示しているhtmlと同じ）を出力する？

ajaxを使うので、実際は全部再表示ではなくて、
結果の部分だけ書き換わる？

こんなイメージでいいでしょうか？

ajaxは初めて使いますがjquery本体を最初に読み込んでおけばいいのですね？

以上、よろしくお願いします。