WebSocketによるリアルタイムネットワーク計測Real-time monitoring with WebSocket

日本に戻ってきて2週間経ちました。松浦です。
市役所に行って転入届等々の処理をしましたが、親切かつ素早く確実な事務処理に驚きました。本当にフランスでは事務処理で泣かされました。日本は良い所です。

今日はWebSocketを使ってリアルタイムにネットワークの利用状態を計測する簡単なアプリケーションを紹介します。

It’s Satoshi MATSUURA. I’ve almost done my one year stay as a visiting researcher at INRIA in France. Next month, I’ll get back to Japan. I’m looking forward to seeing Japanese friends/colleagues and getting real ‘sushi’. On the other hand, I’ll miss French friends, French life and French wine/cheese.

Today, I introduce an example of WebSocket application to realize real-time monitoring/graphing.

0. ソースコードとドキュメント

・ソースコードおよびドキュメント(ZIPファイルのダウンロード)
download code/document (300KB)
・ソースコードおよびドキュメント
see code/document on WEB

1. これは何?

これはリアルタイムにネットワークの利用状況を把握し、グラフを作成するソフトウェアです。ブラウザー越しにMacやLinuxのネットワークの使用状況を見ることが出来ます。WebSocketプログラミング例の簡単な例として作成しました。

rnm_s

2. 概要

このソフトウェアは下記の3つのパートから成っています。

  1. モニタ – WebSocketやHTTP GETを利用し、観測データをサーバに送ります
  2. サーバ – モニタからデータを受け取り、このデータを全てのクライアントにブロードキャストします
  3. ビューア – WebSocketを利用しデータを受け取り、動的にグラフを生成します

WebSocketはリアルタイムなイベント駆動型のアプリケーションを作成することに向いています。サーバはモニタからデータを受け取ったという イベントをトリガーにし、すぐさま全てのビューアにデータをブロードキャストします。各々のビューアはデータを受け取ると受け取ったデータを反映させなが ら動的にグラフを生成していきます。

このソフトウェアは非常に短いコードで実現されています(各々のパートが100行程度)。これはあくまでも例であり、品質よりコードの読みやすさを 優先し、コードを短くしました。設計や実装に関しては4節に記します。興味がある方はそちらを参照し、コードを書き換えて遊んでみてください

3. 使い方

3.1. 環境

– Mac OSX 10.8.2 / ubuntu 12.04 LTS (server edition)
– Perl 5.14.2
– Mojolicious 3.89
– Google Chrome 24.0.1312.57

3.2. インストール手順

まずはMojoliciousが必要です。これはPerl用のWEBフレームワークでWebSocketをサポートしています。インストールは非常に簡単で、下記の通りです。

上手く行かない場合はcpanmを使ってインストールを試みてください。cpanよりもcpanmの方を強くお勧めします。適当に読み替えながら下記のコマンドを実行してください。

3.3. 動かし方 (単純な例)

ここでは ‘ws_server.pl’ と ‘tools/dummy_websocket.pl’ を利用します。Mojoliciousをインストールするとmorboコマンドが利用できるようになっているはずです。morboは開発用のサーバプログ ラムです。もしコマンドが見つからない場合は”~/perl5/bin”(cpanm利用時)を探してみてください。

上記のコマンドを実行するとWebSocketサーバが動作します。ブラウザを使って”http://127.0.0.1:3000″にアクセスしてみて ください。’Network Realtime Monitor’の文字が緑色で表示されていれば、WebSocketを通した通信が上手くいっています。この後で、他のターミナルを利用し、下記のコマ ンドを実行してください。

もしエラーが発生したならば、原因はおそらくモジュールの不足です。下記のコマンドを実行し、モジュールをインストールしてください。modules.txtの中身は必要なモジュールが列挙されているだけです。

もう一度”dummy_websocket.pl”を実行してください。今度はブラウザ上に動的に生成されるグラフが見えると思います。別のターミナルを使って”dummy_websocket.pl”を実行するとグラフの数が増え、二つのグラフが見えると思います。

3.4. 動かし方 (linux/macのモニタリング)

ここではネットワーク的に離れた別のマシンにLinuxがインストールされているものとして話を進めます。最初にmorbo (ws_server.pl)を動かしているマシンのIPアドレス (ここでは192.168.0.100とします)をひかえておきます。そしてLinuxマシン上 で、’tools/network_monitor_linux.pl’の11行目を下記の様に変更します。

上記の修正を行った後に、下記のコマンドをLinuxマシン上で実行すると、ブラウザ上にグラフが追加され、Linuxマシンのネットワーク利用状況が示されます。

Mac上でも同様のことが可能です。’tools/network_monitor_mac.pl’の8行目を同じように変更し、Mac上で下記のコマンドを実行することで、Macのネットワーク利用状況が示されます。

3.5 パラメータの変更

ここでは各種パラメータの設定箇所を示します。

  • NIC
    • ‘tools/network_monitor_linux,mac.pl’ の上部
    • $dev の値を変更する
  • データ送信間隔
    • ‘tools/*.pl’ の上部
    • $interval (単位は秒) の値を変更する
  • グラフのサイズ
    • ‘public/css/rnm.css’
    • .container > width/height の値を変更する
  • グラフのスタイル等
    • ‘public/js/rnm.js’ (85-100行)
    • ‘flotr2′のドキュメントやコードも参考にしてください

3.6 次のステップ

  • 新しい属性の追加
    1. 新しい属性を追加する(例:GPSによる位置情報)
    2. 属性名を定義する(例:lat/lon)
    3. モニタの修正 (JSONフォーマットの箇所) / ビューアの修正 (flotr2によるグラフ描画部)
  • 通信の最適化
    1. 現状では、サーバは受け取ったデータをモニタも含む全てのWebSocketクライアントにブロードキャストする
    2. WebSocketのtransactionを管理している部分を修正し、クライアントのタイプを管理し、モニタに対する無駄な通信を無くす
  • データベースとの連携
    1. データベースのインストール行いサーバのコードを修正し、データを保管できるようにする
    2. 例えばリアルタイムなグラフと過去のデータを重ねて表示する

4 設計・実装

このソフトウェアは下記の3つのパートから成っています。以下の項でそれぞれのパートを説明します。

  1. モニタ – WebSocketやHTTP GETを利用し、観測データをサーバに送ります
  2. サーバ – モニタからデータを受け取り、このデータを全てのクライアントにブロードキャストします
  3. ビューア – WebSocketを利用しデータを受け取り、動的にグラフを生成します

最初にサーバはモニタからデータを受け取ります。次にサーバは受け取ったデータを全てのクライアントにブロードキャストします。本当にこれだけで、 データフローは非常にシンプルです。この設計の大事な所はモニタとビューアの間でデータフォーマットの合意が取れてさえいれば、リアルタイムなアプリケー ションが書けるという事です。

4.1 サーバ

もっとも肝となる部分はサーバのコードです。サーバは受け取ったデータを全てのWebSocketクライアントにブロードキャストします。これは サーバはもちろんのことビューアもWebSocketをサポートする必要がある事を示しています。データの受信はWebSocketおよびHTTP GETの2通りをサポートしています。つまりモニタのプログラムがWebSocketをサポートしていない場合、HTTP GETを利用することが可能です。

上記のコード(ws_server.plの一部)がWebSocketによるブロードキャストを実現している部分です。コードのスタイルはイベント 駆動型です。12行目は’/bc’(例:ws://192.168.0.100/bc)にアクセスがあるとそのイベントを検知して、以下の(無名)関数が 呼ばれる事を示しています。21行目から始まる部分はWebSocketによるアクセスがあった後、メッセージが送れてきたイベントを検知して、以下の関 数(ここではループを回して全てのクライアントにメッセージを送る)を実行する事を示しています。繰り返しになりますが、サーバは複雑な事は何もしませ ん。受け取ったデータをクライアントにブロードキャストするだけです。

このサーバはMojoliciousを使って実装されています。Mojoliciousの環境では”./public”, “./templates”等々が特別な意味をもつディレクトリとなります。詳細な情報はMojoliciousのドキュメントを参考にしてください。

4.2 モニタ・ビューア

モニタとビューアはここでは下記の様なJSONメッセージをやり取りします。

各属性の定義や単位は下記の通りです。

モニタプログラムは内向きおよび外向きのスループットを計測し、上記のJSONフォーマットに合わせたデータを生成します。そのデータをサーバに送り、サーバ経由でビューアプログラムは定期的にデータを受け取り動的にグラフを生成します。

上記のコードは”public/js/rnm.js”の一部です。このコードもイベント駆動型のスタイルです。26行目は特定のURLに WebSocketを使ってアクセスする事を示しています。27行目はビューアがメッセージを受信した場合、’wsMessage()’関数を実行すると いう事を示しています。’wsMessage()’はpushData()関数をその内部で呼び出します。pushData()の一部を下記に示します。

上記のコードはIDを基に内向き外向きのスループットおよびタイムスタンプを記録します。もし他の属性を追加したい場合は81-82行目および88-89 行目を修正し、項目を追加します。もちろんそれに合わせて、モニタが新規データを取得し、拡張された(新しい属性が加わった)JSONデータを送信できる 事が前提です。

参考文献

・Mojolicious
http://mojolicio.us/
・cpanm
https://github.com/miyagawa/cpanminus
・Mojo::UserAgent (Mojolicious Document)
http://mojolicio.us/perldoc/Mojo/UserAgent
・flotr2
http://www.humblesoftware.com/flotr2/

by MATSUURA Satoshi

0. Get code/document

・the whole code/document as a ZIP file
download code/document (300KB)
・code/document
see code/document on WEB

1. What’s this

This software realizes real-time monitoring/graphing. See the blow figure. On your browser, you can see dynamic graphs showing network throughput of linux/mac.

rnm_s

2. Abstract

This software is consists of the following 3 parts:

  1. Monitor – monitoring and sending the data to the server by WebSocket/HTTP GET
  2. Server – receiving data from monitors and broadcasting the data to all clients
  3. Viewer – receiving data via WebSocket and drawing graph

WebSocket realizes realtime event processing. So, the server can broadcast data to all clients just after receiving data from monitors. Each viewers can also draw graphs immediately after receiving data from the server.

I implemented the software with small amount of codes, because it’s easy to understand how the software work. Instead of taking quality, I take simplicity on this implementation. If you’re interested in the design/implementation, see Section 4 (Design/implementation). Please modify the codes as you like

3. How to use

3.1. environment

– Mac OSX 10.8.2 / ubuntu 12.04 LTS (server edition)
– Perl 5.14.2
– Mojolicious 3.89
– Google Chrome 24.0.1312.57

3.2. install

First, Mojolicious is needed. To install Mojolicious is easy. Just type the command as the following:

If you can’t install, try to switch root or to use cpanm/cpan tool. Installing cpanm and Mojolicious is done to type the below commands.

3.3. how to work (simplest case)

In this case, we use ‘ws_server.pl’ and ‘tools/dummy_websocket.pl’. “morbo” is a server program and it is available after installing Mojolicious.

Running the above command, a WebSocket server works. Let’s access “http://127.0.0.1:3000″ by your browser. If you can see ‘Network Realtime Monitor’ with green characters, the server and your browser (viewer) work correctly via WebSocket communication. After that, using another terminal, type the following command.

If you met errors, the reason of the errors would be lacks of modules. Please install modules by the following command:

You can see the all modules which are necessary to run the software. Running ‘dummy_websocket.pl’ again, you can see a dynamic graph on your browser. In addition, if you run ‘dummy_httpget.pl’ with other terminal, two dynamic graphs will be appeared.

3.4. how to work (monitoring on linux/mac)

First, the IP address of server (ws_server.pl) should be checked. I assume the server IP address is ’192.168.0.100′. On a linux machine, modify the 11th line on ‘tools/network_monitor_linux.pl’ as the following:

After modification, run the following command, and you can see a graph showing the network throughput of the linux on your browser.

As the same of linux case, throughput on Mac may be monitored. On a Mac, modify the 8th line on ‘tools/network_monitor_mac.pl’ as the same way of linux. Running the following command, a graph of Mac throughput will be appeared.

 

3.5 change parameters

  • NIC
    • see upper part on ‘tools/network_monitor_{linux,mac}.pl’
    • change the value of $dev
  • interval of sending data
    • see upper part on ‘tools/*.pl’
    • change the value of $interval (unit is second)
  • size of graph
    • see ‘public/css/rnm.css’
    • change the values at .container > width/height
  • appearance of graph
    • see bottom part (line 85–100) on ‘public/js/rnm.js’
    • see also document/examples of ‘flotr2′

3.6 next step

  • add new attributes
    1. monitor additional attributes (e.g., location by GPS)
    2. define attributes’ name (e.g., lat/lon)
    3. modify codes of ‘Monitor’ (JSON format) / ‘Viewer’ (Drawing Graph by flotr2)
  • optimize communications
    1. on current ver., server broadcast data to all WebSocket client including ‘Monitor’
    2. add type of clients on management of WebSocket transactions on code of ‘Server’ to stop sending data to ‘Monitor’
  • operate with database
    1. install database and modify code of ‘Server’ to store data
    2. For example, show the realtime graphs with past graphs

4 Design/Implementation

This software is consists of the following 3 parts:

  1. Monitor – monitoring and sending the data to the server by WebSocket/HTTP GET
  2. Server – receiving data from monitors and broadcasting the data to all clients
  3. Viewer – receiving data via WebSocket and drawing graph

First the server receives data from a monitor. Second the server broadcast the received data to all clients. That’s all. The data flow is very simple. This design means that message format should be defined between ‘Monitor’ and ‘Viewer’.

4.1 server

Most important part is the code of Server. The server broadcast received data to all WebSocket clients on realtime via WebSocket. This means ‘Server’ and ‘Viewer’ have to support WebSocket. The server can receive data through WebSocket/HTTP GET. So, monitor program can send data through WebSocket/HTTP GET.

The above 25 lines code of ‘ws_server.pl’ realizes broadcast by WebSocket. The style of code is event driven style. The line 12 means if the server is accessed at ‘/bc’ via WebSocket, run the below subroutine. The line 21 means that after connecting via WebSocket, if the server receive a message, run the below subroutine. So, if a monitor client connect to the server (e.g., “ws://example.com/bc”) and sends some data via WebSocket, all clients connecting the server will receive these data. So, this server does not process complex tasks but just broadcast received data.

The server is based on ‘Mojolicious’. On Mojolicious environment, “./public”, “./templates” and other directories have special meanings. You can see the detailed information on Mojolicious documents (see references).

4.2 monitor/viewer

‘Monitor’ and ‘Viewer’ manages like the following JSON message.

Definitions and units are shown as the followings:

A monitor program gets status of input/output throughput and create the above JSON data. After that the monitor sends the JSON data to the server. A viewer program constantly receives data and draw dynamic graphs.

The above code is a part of “public/js/rnm.js”. This code is also event driven style. 26th line means connecting to URL via WebSocket. 27th line means if the viewer receives a message, run ‘wsMessage()’. ‘wsMessage()’ calls pushData(). Inside the function of pushData(), the following codes would be found.

This part stores input/output and timestamp based on ‘id’. If you want to add other attributes, add codes like 81st/82nd and 88th/89th. Of course, monitor program also should be modified to send additional attributes on JSON data.

reference

・Mojolicious
http://mojolicio.us/
・cpanm
https://github.com/miyagawa/cpanminus
・Mojo::UserAgent (Mojolicious Document)
http://mojolicio.us/perldoc/Mojo/UserAgent
・flotr2
http://www.humblesoftware.com/flotr2/

by MATSUURA Satoshi