回線品質を可視化
pingのRTTが不安定な方向に回線の品質が悪かったんで、グラフにしたら面白いはずだと思って実装したよ。
RTTの計測方法
当初はpingの応答時間を取ろうと思ってたけども、アプリケーションからpingの結果とるのは通信レイヤが違うので実装が過激になりそう。
そこで今回はWebSocketでサーバからブラウザにpingを送り。ブラウザ側は即座にpongを送り返すことでRTTの計測をします。
これを２秒に１回ずつ計測し延々とグラフにしてみます。
実装
WebSocketといいつつSocket.IOを使って実装。
https://github.com/seiketkm/webping
Socket.IOはシンプルでわかりやすい。
server.js（サーバ側）
index.js(ブラウザ側)
- サーバ側で２秒ごとにping、
- ブラウザ側ではpingを受け取ったらすぐさまpong
- pongを受け取ったらrttを計算しブラウザに送信
- rttをグラフにプロット。
という感じで、あまり難しいことはしてない。
動作キャプチャ
（Wimax）
(IIJmio)
こんな感じ、グラフは点が追加されるごとに新しい計測点が右から左に流れる。
Cloud9で作ってたので、ここで参照可能？
https://webping-seiketkm.c9.io
Cloud9の開発用のサーバ、どれくらい動き続けるのかよくわかってない。
WimaxだとRTTが1秒くらいかかってる時があって結構辛い通信環境。
やろうとしたけどやめたこと
当初は同時に接続している端末のRTT情報をまとめて可視化しようと思ってたけど、増えたり減ったりする接続とグラフ描画に利用しているChart.jsのLineChartの制約でとりあえず未実装。
LineChartは同一の計測点に対して一つの値が必要なので、計測の開始地点が違うグラフや返ってこないこともあることを考えると複数の結果を重ねられる気がしなかった。
感想
リアルタイムに動くものはそれなりに面白くみえていいね。