个人状态页面
看起来你安装的 vnstat 版本不支持 -u 参数。让我们按照正确的步骤配置 vnstat 并设置带宽监控 API。
步骤 1：配置 vnstat
为你的网络接口初始化 vnstat：
sudo vnstat -i eth0
步骤 2：等待数据收集
vnstat 需要时间来收集数据。定期检查状态：
sudo vnstat -l
一段时间后，验证数据收集：
sudo vnstat -d
步骤 3：创建 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 命令以获取 eth0 的 5 分钟间隔流量统计数据
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)
运行脚本：
python bandwidth_api.py
步骤 4：与你的博客集成
使用以下 HTML 和 JavaScript 获取并显示带宽数据：
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);
// 将时间容器附加到状态 div
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 = ['时间', '流量 (KB/s)', '状态'];
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); // 转换为 KB/s
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);
// 将表格附加到状态 div
document.getElementById('status').appendChild(table);
})
.catch(error => {
console.error('获取带宽数据时出错:', error);
});
});
将 http://your-droplet-ip:5000/bandwidth 替换为你的 droplet 的 IP 地址。
其他考虑事项
- 安全性：确保你的 API 是安全的。考虑添加身份验证。
- 性能：监控带宽可能会占用大量资源。确保你的 droplet 有足够的资源。
- 可靠性：添加错误处理和重试逻辑以处理 API 不可用的情况。
通过按照这些步骤操作，你可以在博客上创建一个状态页面，根据你的 DigitalOcean droplet 的带宽使用情况显示你是否在线。