|
JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。 EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、 備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、 これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。 |
|
|
JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。 EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、 備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、 これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。 |
|
■応用の森 CPU使用率推移グラフ View(HTML) |
|
今回は、グラフに描画するCPU使用率データをWebSocketで取得し、 取得したデータを、Google Chartで描画するview(HTML)を作成します。 まず、HTML本体のソースを確認します。 |
|
WebContent/websocketcpu.html HTML部は非常に単純です。 グラフ描画「開始」「停止」ボタンと、描画エリアの<div id="chart_div">タグのみの簡素なHTMLです。 重要なのは、JavaScript(jQuery)部。 ※１）Google Chart JSのインクルード Google Chartを描画するためのjsをインクルードします。 ※２）Google Chart Load google.charts.load()で、Google Chartをロードします。 ここで注意点。google.charts.load()は同一ページで２回以上呼び出すと エラーとなるため、jQueryの先頭で１回だけ呼び出すようにしましょう。 ※３）WebSocket作成 new WebSocket()で、WebSocketでサーバーに接続します。 ここでは、localhostのURLで接続していますが、環境に合わせて適宜URLを変更してください。 ※４）WebSocket message受信時のイベントハンドラ登録 サーバーからメッセージを受信した時のハンドラを登録します。 messageにサーバーからのテキストメッセージが返るため このメッセージを適切に処理します。 このハンドラでは、グラフ描画関数drawVisualization()にメッセージを引き渡しています。 ※５）「開始」ボタンクリック時の処理 サーバー側のWebSocketに、CPU使用率取得処理開始コマンドを送信します。 処理が開始されると、サーバーから３秒間隔でJSON形式のメッセージが返され、 ※４）のmessage受信ハンドラでメッセージを受信します。 ※６）「停止」ボタンクリック時の処理 サーバー側のWebSocketに、CPU使用率取得処理停止コマンドを送信します。 ※７）Google Chart グラフ描画関数 サーバーから返却されたJSON形式のテキストメッセージを、一旦JSONオブジェクトに変換し、 これをGoogle Chart描画形式のJSONデータにコンバートして 折れ線グラフを描画します。 グラフのオプションはさらに色々指定できますが 詳しいことは、ここでは割愛します。 Google Charts のドキュメントで調べてください。 |
|
次ページで、サーバー側のプログラムを解説します |
CPU使用率推移グラフのプログラム構造 
|
CPU使用率推移グラフ View(HTML) |
 CPU使用率推移グラフ 実行クラス
|