SNMPで取得したネットワーク機器のトラフィック情報をもとに、JavaScriptを利用してトラフィックグラフを表示するツールを作成します。
トラフィック情報の取得方法については、下記を参照してください。
- Progate 〜 プログラミングの入門なら基礎から学べるProgate[プロゲート]
- ドットインストール 〜 3分動画でマスターできるプログラミング学習サービス
どちらのサイトも無料で学習可能な範囲があります。有料コンテンツに関しては、月額1000円程度です。
目標作成物
ブラウザ上でCSVファイルを読み込み、トラフィックグラフを表示します。
初期画面
CSVファイルの読み込み後
以下の機能を持たせています。
- CSVファイルの読み込み
- ファイル選択ダイアログを開き、CSVファイルを指定します。
- 表示する期間の指定
- 表示対象の期間を指定します。
- グラフの上限値の変更(100Mbps〜1Kbps)
- デフォルトで上限100Mbpsとして、1Kbpsまで調整可能とします。
作成準備
利用する技術
今回利用する技術は下記の通りです。
- HTML
- Webページを作成するための言語
- CSS
- Webページの見た目を整える
- JavaScript
- Webブラウザ上で動作するプログラミング言語
- Bootstrap
- Webアプリケーション用のフレームワーク
- Chart.js
- JavaScriptでグラフを描くライブラリ
トラフィック情報(CSVデータ)
「日付」「時刻」「Input(総送信Byte数)」「Output(総受信Byte数)」をカラム区切りで記載したCSVファイルを読み込みます。データは、1分毎に取得しています。
date,time,In,Out
2022/8/18,17:59:00,1113152536,1113073622
2022/8/18,18:00:00,1235056092,1164996546
2022/8/18,18:01:00,1535296858,1225215608
・・・
・・・今回利用するデータの全量は下記です。
トラフィック情報の取得方法は、下記を参照してください。
プログラムの全体像
プログラムの完成形は下記です。「index.html(HTMLファイル)」と「main.js(JavaScriptコード)」の2ファイルを用意して、「index.html」をブラウザで開けば動作します。
JavaScriptのコードに関しては、少し冗長な書き方になっていますが、「CSVファイルを読み込んだ時の処理」「表示期間を指定した時の処理」「グラフ上限値を変更した時の処理」に分けて記載しています。
HTMLファイルの詳細説明
HTMLファイルの詳細を説明します。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">Bootstrapを利用するための記述です。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>Chart.jsを利用するための記述です。
<div class="mb-3">
<label for="formFile" class="form-label text-primary">表示するI/Fのファイルを選択してください</label>
<input class="form-control font-monospace" type="file" id="file">
</div>CSVファイルを取得するためのフィールドを設置します。
<div class="text-primary mt-2">表示する期間を選択してください</div>
<div class="datetime-check font-monospace">
<input type="datetime-local" id="start-time" name="start-time" step="300">
〜
<input type="datetime-local" id="end-time" name="end-time" step="300">
<button type="button" id="display" class="btn btn-primary my-1">表示</button>
</div>表示する期間を指定するためのフィールドを設置します。
<div class="text-primary my-2">グラフの上限値を変更できます。（デフォルト=100Mbps）</div>
<button type="button" id="100M" value="M,100,10" onclick="bpscalc(this)"
class="btn btn-secondary">100Mbps</button>
<button type="button" id="10M" value="M,10,1" onclick="bpscalc(this)"
class="btn btn-secondary">10Mbps</button>
<button type="button" id="1M" value="M,1,1" onclick="bpscalc(this)"
class="btn btn-secondary">1Mbps</button>
<button type="button" id="100K" value="K,100,10" onclick="bpscalc(this)"
class="btn btn-secondary">100Kbps</button>
<button type="button" id="10K" value="k,10,1" onclick="bpscalc(this)"
class="btn btn-secondary">10Kbps</button>
<button type="button" id="1K" value="K,1,1" onclick="bpscalc(this)"
class="btn btn-secondary">1Kbps</button>グラフ上限値を変更するためのボタンを設置します。押したボタンによって処理を変えるために、”value” を設定します。
<canvas id="trafficGraph"></canvas>グラフを描画するためのフィールドを定義します。
<script src="main.js"></script>JavaScriptを呼び出します。
JavaScriptコードの詳細説明
JavaScriptコードの詳細を説明します。
CSVファイルを読み込んだ時の処理
const ctx = document.getElementById("trafficGraph");
let trafficGraph = new Chart(ctx);グラフ描画用の変数をセットします。
const result = [];
let fileInput = document.getElementById('file');
let fileReader = new FileReader();
fileInput.onchange = () => {
let file = fileInput.files[0];
fileReader.readAsText(file);
};CSVファイルを読み込み、変数にセットします。
fileReader.onload = () => {
const txt = fileReader.result;
const arr = txt.split("\n");
for (let i = 0; i < arr.length; ++i) {
result[i] = arr[i].split(',');
}CSVファイルを、カンマ区切りで配列(result)に格納します。
const datetime = [];
const input5minave = [];
const output5minave = [];グラフの要素を配列として宣言します。
for (let i = 0; i < result.length - 1; i++) {CSVファイルの行数分、繰り返し処理を開始します。
datetime[i] = result[i][0] + ' ' + result[i][1].slice(0, -3);「日付」と「時刻」を結合して、配列(datetime)に格納します。
input5minave[i] = (Number(result[i + 1][2]) - Number(result[i][2])) / 1024 / 1024 * 8 / 60;
output5minave[i] = (Number(result[i + 1][3]) - Number(result[i][3])) / 1024 / 1024 * 8 / 60;
}送受信データ量については以下の計算をして、配列(input5minave/output5minave)に格納します。
- (Number(result[i + 1][2]) – Number(result[i][2]))
- 2回分のデータの差分を計算し、1分間の送受信データ量を取得
- / 1024 / 1024
- 1024で2回割り、メガへ変換
- * 8
- 8を掛けて、Byte→bitへ変換
- / 60
- 60で割って、1秒あたりの平均速度を計算(per/secの計算)
datetime.shift();
input5minave.shift();
output5minave.shift();それぞれの配列の見出し行を削除します。
let sdateelement = document.getElementById("start-time");
let edateelement = document.getElementById("end-time");
const starttime = new Date(datetime[0]);
starttime.setHours(starttime.getHours() + 9)
sdateelement.value = starttime.toISOString().slice(0, -8);
const endtime = new Date(datetime[datetime.length - 1]);
endtime.setHours(endtime.getHours() + 9)
edateelement.value = endtime.toISOString().slice(0, -8);CSVファイルの開始日時と終了日時を取得し、ツール上の「表示期間選択フィールド」にセットします。
if (trafficGraph) {
trafficGraph.destroy();
}変数：trafficGraphのデータをリセットします。※この処理を入れないと、グラフを再描画した際に表示が乱れることがあります。
trafficGraph = new Chart(ctx, {グラフ描画用の変数に表示する値をセットします。
type: 'line',「折れ線グラフ」を指定します。
data: {
labels: datetime,横軸に日時(配列：datetime)をセットします。
datasets: [
{
label: 'Input',
data: input5minave,
borderColor: "rgba(175,215,246,1)",
backgroundColor: "rgba(0,0,0,0)"
},縦軸の1つ目に受信平均速度(配列：input5minave)をセットし、線の色を指定します。
{
label: 'Output',
data: output5minave,
borderColor: "rgba(237,192,58,1)",
backgroundColor: "rgba(0,0,0,0)"
}縦軸の2つ目に送信平均速度(配列：output5minave)をセットし、線の色を指定します。
options: {
title: {
display: false,
text: 'トラフィックグラフ'
},グラフのタイトルを指定します。※今回は、”false” を指定して、非表示にしています。
scales: {
yAxes: [{
ticks: {
max: 100,
min: 0,
stepSize: 10,「グラフ上限値」「下限値」「補助メモリの間隔」を指定します。
scaleLabel: {
display: true,
labelString: 'Mbps'縦軸のラベルを指定します。
動作確認(CSVファイルの読み込み)
表示期間を指定した時の処理
let displayclick = document.getElementById('display');「表示」ボタンのIDを取得します。
displayclick.onclick = () => {「表示」ボタンをクリックした時の関数を定義します。
const starttime = new Date(document.getElementById('start-time').value);
const endtime = new Date(document.getElementById('end-time').value);表示する期間の「開始日時」と「終了日時」を取得します。
let specstarttime = 0;
let specendtime = datetime.length;指定された表示期間を特定するための変数を定義します。
for (var i = 0; i < datetime.length - 1; i++) {
datetimediff = new Date(datetime[i]);
if (starttime.getTime() <= datetimediff.getTime()) {
specstarttime = i;
break;
}
}横軸(配列：datetime)の何番目から表示するかを特定します。
for (var i = 0; i < datetime.length - 1; i++) {
datetimediff = new Date(datetime[i]);
if (endtime.getTime() <= datetimediff.getTime()) {
specendtime = i;
break;
}
}横軸(配列：datetime)の何番目まで表示するかを特定します。
const specdatetime = datetime.slice(specstarttime, specendtime + 1);
const specinput5minave = input5minave.slice(specstarttime, specendtime + 1);
const specoutput5minave = output5minave.slice(specstarttime, specendtime + 1);特定した表示期間で、グラフの要素を切り取ります。
if (trafficGraph) {
trafficGraph.destroy();
}変数：trafficGraphのデータをリセットします。※この処理を入れないと、グラフを再描画した際に表示が乱れることがあります。
trafficGraph = new Chart(ctx, {
labels: specdatetime,
data: specinput5minave,
data: specoutput5minave,特定した表示期間で、グラフを描画します。
動作確認(表示期間の変更)
グラフ上限値を変更した時の処理
objvalue = obj.value.split(",");上限値を指定するボタンのvalueの値をカンマ区切りで取得します。
if (objvalue[0] == "M") {
for (let i = 0; i < result.length - 1; i++) {
datetime[i] = result[i][0] + ' ' + result[i][1].slice(0, -3);
input5minave[i] = (Number(result[i + 1][2]) - Number(result[i][2])) / 1024 / 1024 * 8 / 60;
output5minave[i] = (Number(result[i + 1][3]) - Number(result[i][3])) / 1024 / 1024 * 8 / 60;
}Mbpsのボタンが押された場合の処理です。
} else {
for (var i = 0; i < result.length - 1; i++) {
datetime[i] = result[i][0] + ' ' + result[i][1].slice(0, -3);
input5minave[i] = (Number(result[i + 1][2]) - Number(result[i][2])) / 1024 * 8 / 60;
output5minave[i] = (Number(result[i + 1][3]) - Number(result[i][3])) / 1024 * 8 / 60;
}
}Kbpsのボタンが押された場合の処理です。※1024で割る回数を1回にして、Kbpsを計算しています。
trafficGraph = new Chart(ctx, {
labelString: objvalue[0] + 'bps'MbpsかKbpsによって、表示を変えています。
動作確認(グラフ上限値の変更)
以上で、ネットワークエンジニアのプログラミング【JavaScript入門(トラフィックグラフ作成)】の説明は完了です！プログラミングができると、仕事の効率化ができますし、何より仕事を楽しむことができます！！
- Progate 〜 プログラミングの入門なら基礎から学べるProgate[プロゲート]
- ドットインストール 〜 3分動画でマスターできるプログラミング学習サービス
どちらのサイトも無料で学習可能な範囲があります。有料コンテンツに関しては、月額1000円程度です。