5.8 KiB

Raw Blame History

流量监控功能文档

概述

新增了实时流量监控功能，可以查看每个端口映射和隧道的流量统计，并以可视化图表的形式展示。

新增功能

1. 流量统计

系统自动统计以下数据：

隧道流量: 通过tunnel发送/接收的总字节数
端口映射流量: 每个端口映射单独的流量统计
总流量: 所有流量的汇总

2. API 接口

GET /api/stats/traffic

获取当前最新的流量统计数据。

响应示例:

{
  "success": true,
  "message": "获取流量统计成功",
  "data": {
    "tunnel": {
      "bytes_sent": 1048576,
      "bytes_received": 2097152,
      "last_update": 1697462400
    },
    "mappings": [
      {
        "port": 30009,
        "bytes_sent": 524288,
        "bytes_received": 1048576,
        "last_update": 1697462400
      }
    ],
    "total_sent": 1572864,
    "total_received": 3145728,
    "timestamp": 1697462400
  }
}

GET /api/stats/monitor

访问流量监控Web页面，提供可视化的实时监控界面。

特性:

📊 实时流量趋势图表
📈 流量速率计算 (KB/s)
🔄 每3秒自动刷新
📱 响应式设计，支持移动设备
🎨 美观的UI界面

3. Web监控页面

访问地址: http://localhost:8080/api/stats/monitor

页面内容:

总览卡片
- 总发送流量
- 总接收流量
- 隧道发送流量
- 隧道接收流量
实时流量趋势图
- 显示最近20个数据点
- 发送/接收速率曲线
- 单位: KB/s
端口映射详情
- 每个端口的流量统计
- 实时更新

使用方法

1. 启动服务

cd /home/qcqcqc/workspace/go-tunnel/src
make build
make run-server

2. 访问监控页面

在浏览器中打开:

http://localhost:8080/api/stats/monitor

3. API调用示例

使用curl获取流量数据:

# 获取流量统计
curl http://localhost:8080/api/stats/traffic

# 格式化输出
curl http://localhost:8080/api/stats/traffic | jq .

使用JavaScript获取数据:

fetch('http://localhost:8080/api/stats/traffic')
  .then(res => res.json())
  .then(data => {
    console.log('总发送:', data.data.total_sent);
    console.log('总接收:', data.data.total_received);
  });

4. 集成到自己的前端

你可以定期调用 /api/stats/traffic 接口获取数据，然后在自己的前端页面中展示：

// 每3秒获取一次数据
setInterval(async () => {
  const response = await fetch('http://localhost:8080/api/stats/traffic');
  const result = await response.json();
  
  if (result.success) {
    const data = result.data;
    
    // 更新UI
    updateTotalSent(data.total_sent);
    updateTotalReceived(data.total_received);
    
    // 更新图表
    updateChart(data);
    
    // 更新端口列表
    updatePortList(data.mappings);
  }
}, 3000);

实现细节

流量统计机制

Tunnel层统计
- 在 writeTunnelMessage 中记录发送字节数
- 在 readTunnelMessage 中记录接收字节数
- 使用 atomic.AddUint64 保证并发安全
Forwarder层统计
- 在 io.Copy 返回后记录传输字节数
- 分别统计客户端→目标和目标→客户端的流量

数据结构

type TrafficStats struct {
    BytesSent     uint64 // 发送字节数
    BytesReceived uint64 // 接收字节数
    LastUpdate    int64  // 最后更新时间
}

性能考虑

使用原子操作 (sync/atomic) 避免锁竞争
统计开销极小，几乎不影响转发性能
只在需要时才计算速率

测试验证

1. 基础测试

# 1. 启动服务器和客户端
make run-server  # 终端1
make run-client  # 终端2

# 2. 创建端口映射
curl -X POST http://localhost:8080/api/mapping/create \
  -H "Content-Type: application/json" \
  -d '{
    "source_port": 30009,
    "target_host": "127.0.0.1",
    "target_port": 22,
    "use_tunnel": true
  }'

# 3. 通过映射传输一些数据
ssh root@localhost -p 30009

# 4. 查看流量统计
curl http://localhost:8080/api/stats/traffic | jq .

2. 压力测试

# 使用 scp 传输大文件测试流量统计
dd if=/dev/zero of=test.dat bs=1M count=100
scp -P 30009 test.dat root@localhost:/tmp/

# 观察监控页面的实时变化

3. 长时间运行测试

# 保持监控页面打开，观察：
# - 图表是否正常更新
# - 数据是否累积正确
# - 内存占用是否稳定

故障排查

问题1: 流量统计不准确

可能原因:

连接未正常关闭
统计溢出（极少见，uint64可存储18EB）

解决方法:

# 重启服务器重置统计

问题2: 监控页面无法访问

检查:

# 确认服务器正在运行
curl http://localhost:8080/health

# 检查端口是否被占用
netstat -tlnp | grep 8080

问题3: 图表不更新

检查:

打开浏览器开发者工具 (F12)
查看 Console 是否有错误
查看 Network 标签，确认 API 请求成功

未来改进

可能的增强功能：

流量统计持久化（保存到数据库）
历史流量查询
流量告警（超过阈值时通知）
导出流量报表
按时间段统计（小时/天/月）
WebSocket实时推送（减少轮询）

技术栈

后端: Go 1.x
前端: 原生 JavaScript + Chart.js 4.4.0
图表库: Chart.js (CDN)
样式: CSS3 (渐变、动画)

许可证

与主项目相同

更新日期

2025-10-16

5.8 KiB Raw Blame History Unescape Escape