صفحة الحالة الشخصية

Home PDF Audio

يبدو أن إصدار vnstat الذي قمت بتثبيته لا يدعم المعلمة -u. دعنا نتابع مع الخطوات الصحيحة لتكوين vnstat وإعداد واجهة برمجة التطبيقات (API) لمراقبة عرض النطاق الترددي.

الخطوة 1: تهيئة vnstat

في هذه الخطوة، سنقوم بتهيئة أداة vnstat لجمع وإدارة إحصائيات استخدام الشبكة.

تهيئة vnstat لواجهة الشبكة الخاصة بك:

sudo vnstat -i eth0

الخطوة 2: انتظر جمع البيانات

vnstat يحتاج إلى وقت لجمع البيانات. تحقق من الحالة بشكل دوري:

sudo vnstat -l

بعد مرور بعض الوقت، تحقق من جمع البيانات:

sudo vnstat -d

الخطوة 3: إنشاء واجهة برمجة تطبيقات (API) لعرض بيانات النطاق الترددي

في هذه الخطوة، سنقوم بإنشاء واجهة برمجة تطبيقات (API) تسمح لنا بعرض بيانات النطاق الترددي التي تم جمعها في الخطوات السابقة. ستمكن هذه الواجهة التطبيقات الأخرى من الوصول إلى البيانات واستخدامها بسهولة.

1. إنشاء ملف API

أولاً، سنقوم بإنشاء ملف جديد لاستضافة واجهة برمجة التطبيقات. يمكنك تسمية الملف api.py أو أي اسم آخر مناسب.

from flask import Flask, jsonify
import sqlite3

app = Flask(__name__)

def get_bandwidth_data():
    conn = sqlite3.connect('bandwidth.db')
    cursor = conn.cursor()
    cursor.execute("SELECT * FROM bandwidth_usage")
    data = cursor.fetchall()
    conn.close()
    return data

@app.route('/api/bandwidth', methods=['GET'])
def bandwidth():
    data = get_bandwidth_data()
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True)

2. شرح الكود

3. تشغيل API

بعد إنشاء الملف، يمكنك تشغيل API باستخدام الأمر التالي في سطر الأوامر:

python api.py

سيبدأ الخادم في الاستماع على المنفذ الافتراضي (عادةً 5000). يمكنك الوصول إلى البيانات عن طريق زيارة الرابط التالي في المتصفح أو باستخدام أدوات مثل curl أو Postman:

http://127.0.0.1:5000/api/bandwidth

ستحصل على استجابة تحتوي على بيانات النطاق الترددي بتنسيق JSON.

4. اختبار API

للتأكد من أن API يعمل بشكل صحيح، يمكنك استخدام أدوات مثل Postman لإرسال طلب GET إلى نقطة النهاية والتحقق من الاستجابة.

بهذا تكون قد أنشأت واجهة برمجة تطبيقات (API) لعرض بيانات النطاق الترددي. يمكنك الآن استخدام هذه الواجهة في تطبيقاتك الأخرى أو مشاركتها مع المطورين الآخرين.

تثبيت Flask:

pip install Flask

إنشاء نص برمجي بلغة Python (bandwidth_api.py):

from flask import Flask, jsonify
from flask_cors import CORS
import subprocess

app = Flask(__name__)
CORS(app)  # تمكين CORS لجميع المسارات

@app.route('/bandwidth', methods=['GET'])
def get_bandwidth():
    # تشغيل أمر vnstat للحصول على إحصائيات حركة المرور لفترة 5 دقائق لـ eth0
    result = subprocess.run(['vnstat', '-i', 'eth0', '-5', '--json'], capture_output=True, text=True)
    data = result.stdout

# إرجاع البيانات الملتقطة كاستجابة JSON
return jsonify(data)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)


قم بتشغيل البرنامج النصي:

```sh
python bandwidth_api.py

الخطوة 4: التكامل مع مدونتك

استخدم HTML و JavaScript التاليين لجلب وعرض بيانات النطاق الترددي:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عرض بيانات النطاق الترددي</title>
</head>
<body>
    <h1>بيانات النطاق الترددي</h1>
    <div id="bandwidth-data"></div>

    <script>
        // دالة لجلب البيانات من الخادم
        async function fetchBandwidthData() {
            try {
                const response = await fetch('/api/bandwidth');
                const data = await response.json();
                displayBandwidthData(data);
            } catch (error) {
                console.error('حدث خطأ أثناء جلب البيانات:', error);
            }
        }

        // دالة لعرض البيانات في الصفحة
        function displayBandwidthData(data) {
            const bandwidthDataElement = document.getElementById('bandwidth-data');
            bandwidthDataElement.innerHTML = `
                <p>النطاق الترددي المستخدم: ${data.usedBandwidth} MB</p>
                <p>النطاق الترددي المتبقي: ${data.remainingBandwidth} MB</p>
                <p>إجمالي النطاق الترددي: ${data.totalBandwidth} MB</p>
            `;
        }

        // جلب البيانات عند تحميل الصفحة
        fetchBandwidthData();
    </script>
</body>
</html>

في هذا المثال، يتم استخدام JavaScript لجلب بيانات النطاق الترددي من خادم API وعرضها في صفحة الويب. يتم استدعاء الدالة fetchBandwidthData عند تحميل الصفحة لجلب البيانات من الخادم، ثم يتم عرضها باستخدام الدالة displayBandwidthData.

document.addEventListener('DOMContentLoaded', function () {
    fetch('https://www.lzwjava.xyz/bandwidth')
        .then(response => response.json())
        .then(data => {
            var bandwidthData = JSON.parse(data);

        // إنشاء حاوية للأوقات
        var timesContainer = document.createElement('div');

var currentUtcTime = new Date();
var currentLocalTime = new Date(currentUtcTime.getTime());

        var pUtcTime = document.createElement('p');
        pUtcTime.textContent = `التوقيت العالمي المنسق (UTC): ${currentUtcTime.toUTCString()}`;
        timesContainer.appendChild(pUtcTime);

        var pLocalTime = document.createElement('p');
        pLocalTime.textContent = `وقتي المحلي: ${currentLocalTime.toString()}`;
        timesContainer.appendChild(pLocalTime);

// إضافة حاوية الأوقات إلى عنصر الحالة
document.getElementById('status').appendChild(timesContainer);

        // إنشاء جدول
        var table = document.createElement('table');
        table.border = '1';
        table.style.borderCollapse = 'collapse';
        table.style.width = '100%';

            // إنشاء رأس الجدول
            var thead = document.createElement('thead');
            var tr = document.createElement('tr');
            var headers = ['الوقت', 'حركة المرور (كيلوبايت/ثانية)', 'الحالة'];
            headers.forEach(headerText => {
                var th = document.createElement('th');
                th.textContent = headerText;
                tr.appendChild(th);
            });
            thead.appendChild(tr);
            table.appendChild(thead);

        // إنشاء جسم الجدول
        var tbody = document.createElement('tbody');

        // معالجة بيانات حركة المرور
        var fiveMinuteData = bandwidthData.interfaces[0].traffic.fiveminute.reverse();
        fiveMinuteData.forEach(interval => {
            var tr = document.createElement('tr');

var dataTime = new Date(Date.UTC(interval.date.year, interval.date.month - 1, interval.date.day, interval.time.hour, interval.time.minute));
var timeDifference = Math.round((currentUtcTime - dataTime) / (1000 * 60)); // الفرق الزمني بالدقائق

var tdTimeDifference = document.createElement('td');
tdTimeDifference.textContent = timeDifference + ' دقيقة مضت';
tr.appendChild(tdTimeDifference);

var averageTraffic = (interval.rx + interval.tx) / 2; // حساب المتوسط بين RX و TX
var tdTrafficKBs = document.createElement('td');
var trafficKBs = (averageTraffic / (5 * 60 * 1024)).toFixed(2); // التحويل إلى كيلوبايت/ثانية
tdTrafficKBs.textContent = trafficKBs;
tr.appendChild(tdTrafficKBs);

var tdStatus = document.createElement('td');
tdStatus.textContent = trafficKBs > 5 ? 'متصل' : 'غير متصل';
tdStatus.className = trafficKBs > 5 ? 'status-online' : 'status-offline';
tr.appendChild(tdStatus);

tbody.appendChild(tr);
});
table.appendChild(tbody);

// إلحاق الجدول بجزء الحالة (status div)
document.getElementById('status').appendChild(table);
})
.catch(error => {
    console.error('حدث خطأ أثناء جلب بيانات النطاق الترددي:', error);
});

```

استبدل http://your-droplet-ip:5000/bandwidth بعنوان IP الخاص بـ droplet الخاص بك.

اعتبارات إضافية

باتباع هذه الخطوات، يمكنك إنشاء صفحة حالة على مدونتك تشير إلى ما إذا كنت متصلاً بالإنترنت أم لا بناءً على استخدام النطاق الترددي لـ Droplet الخاص بك على DigitalOcean.

Back 2025.01.18 Donate