چه کارهای جالبی با گنو/لینوکس انجام می‌دهم : گراف لحظه ای مصرف پهنای باند
by Ahmed on ۱۹/۱۱/۱۳۹۱آخرین مطلب من برای شرکت در مسابقه چرا گنو/لینوکس را دوست دارم؟ یه پروژه کوچیک بر مبنای HTML5 هست برای کشیدن گراف لحظه ای مصرف پهنای باند :)
داستان از اونجایی شروع شد که من و همکارم آقای مقدم تو شرکت داشتیم بحث میکردیم که چه کارهای جالبی رو میشه با HTML5 انجام داد که یهو تصمیم گرفتیم به جای حرف زدن یکیشونو عملی کنیم.
ایده این بود که یک نمایش دهنده لجظه ای میزان دانلود یا همون Realtime Bandwidth Grapher رو بسازیم و شروع کردیم جمع کردن مواد مورد نیاز!
برای کشیدن گراف این کتابخونه جاوااسکریپتیو پیدا کردیم که با کمک المان canvas موجود در HTML5 گراف مورد نظرو میکشه.
در حقیقت canvas طراحی شده تا با کمک یک زبان اسکریپتی مثل javascript در لحظه اشکال هندسی که شما میخواهیدو نمایش بده.
برای قسمت ارتباط مداوم با سرور از تکنولوژی SSE ارایه شده در HTML5 بهره بردیم که در حقیقت به مرورگر وبمون این امکانو میده که طبق فواصل زمانی که سرور بهش میگه اطلاعات رو بدون رفرش کردن صفحه از سرور بگیره.
و برای سمت سرور هم از یه کد تلفیقی کوچیک php و bash به صورت زیر استفاده کردیم:
|
1
2
3
4
5
6
7
8
9
|
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$interface = "ppp0";
$rec = system("ifconfig $interface | grep 'RX bytes' | sed -e 's,.*RX bytes:,,' -e 's, .*,,'");
echo "retry: 1000\n";
echo "data:{$rec}\n\n";
flush();
|
در دو خط اول ما نوع و خاصیت اطلاعات ارسالی رو طبق مثال موجود در سایت w3schools مشخص میکنیم و بعد یه متغییر به نام interface رو تعریف میکنیم که قراره اسم اینترفیس ارتباطی با اینترنت رو نگه داره مثل eth0 یا wlan0 یا ppp0 و بعد از اون با کمک تابع system که به ما امکان اجرای برنامه های خارجی رو میده مقدار اطلاعات دریافتی در لحظه رو بدست میاریم.
در اخر هم با کمک retry میگیم که مرورگر ۱ ثانیه دیگه دوباره به ما سر بزنه و با کمک data اطلاعات بدست آمده رو به مرورگر میفرستیم، در ضمن به اون دو تا اینتر آخر ماجرا هم توجه کنید چون در حقیقت وجود اوناست که میگه آخر درخواست HTTP ماست.
خوب ما کارهای سمت سرور رو انجام دادیم، حالا نوبت ساختن صفحه سمت کاربر با کمک تکنولوژی هایی که پیدا کردیم :)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
!DOCTYPE html>
html>
header>
title>Bandwidth Realtime Graph/title>
//this varible set your shaper maxmimom KB
var range=500;
#container
{
margin:0px auto;
width:960px;
text-align:center;
min-height:550px;
}
#footer
{
text-align:center;
}
/header>
body>
div id="container">
h1>Bandwidth Realtime Graph/h1>
div id="result" style="font-weight:bold; color:red;">/div>
canvas id="rec_graph" height="200" width="930" style="font-size: 6pt;">/canvas>
/div>
div id="footer">
a href="http://www.w3.org/html/logo/">
img src="HTML5_Logo_64.png" alt="HTML5" />
/a>
/div>
="text/javascript" src="graph.js">
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("rec.php");
var seconds = 1;
source.onmessage = function(event)
{
var new_rec = event.data;
if ( typeof(old_rec) != "undefined") {
bytes = new_rec - old_rec;
rate_rec = bytes * 8 / seconds / 1024;// kbps
document.getElementById("result").innerHTML=
Math.round(rate_rec) + " Kbps";
}
old_rec = new_rec;
};
} else {
document.getElementById("result").innerHTML=
"Sorry, your browser does not support server-sent events...";
}
window.onload = function() {
g_graph = new Graph(
{
'id': "rec_graph",
'strokeStyle': "#819C58",
'fillStyle': "rgba(64,128,0,0.25)",
'interval': 1000,
'range': [0,range],
'grid': [40,40],
'showlabels': true,
'call': function(){return (Math.round(rate_rec));}
});
}
/body>
/html>
|
خوب کد های بالا بر طبق مستنداتی که قبلتر لینکاشونو در صفحه قرار دادیم نوشته شدن و فکر نمیکنم توضیح خط به خطش لازم باشه، فقط راجع به متغییر range یه توضیحی بدم اونم اینه که باید ماکسیموم کیلوبایت بر ثانیه که ممکنه از اینترفیس شما دانلود بشه توش نوشته بشه تا تمام نقاطی که کشیده میشن صحیح کشیده بشن، مثلا اگه سرعت اینترنتتون ۲۵۶ کیلوبایت بر ثانیه هست عدد ۳۰۰ معقول به نظر میرسه.
و در نهایت اینم از این پروژه، یه کار لذت بخش همراه با رفقایی که دوستشون داری :)
برای دانلود و یا تصحیح و تکمیل پروژه میتونید از لینک زیر استفاده کنید:
There are 2 comments in this article: