如何在Electron JS应用中获取网络速度、延迟等网络统计数据？

1. 基于Node.js原生模块获取基础网络信息 #

Electron内置Node.js环境，可直接用原生模块获取网络接口、检测延迟：

• os.networkInterfaces()：获取所有网络接口的IP、MAC、子网掩码等基础信息
• net模块：通过连接公共服务器（如8.8.8.8）检测网络延迟

const os = require('os');
const net = require('net');

// 获取所有网络接口详情
function getNetworkInterfaces() {
  return os.networkInterfaces();
}

// 测量网络延迟（默认连接谷歌DNS）
function measureLatency(host = '8.8.8.8', port = 53) {
  return new Promise(resolve => {
    const startTime = Date.now();
    const socket = new net.Socket();
    socket.setTimeout(3000);

    socket.connect(port, host, () => {
      socket.end();
      resolve(Date.now() - startTime);
    });

    socket.on('timeout', () => {
      socket.destroy();
      resolve('超时');
    });

    socket.on('error', () => {
      socket.destroy();
      resolve('连接失败');
    });
  });
}

2. 统计网络上传/下载速度（最小、最大值） #

通过定时采样网络接口的收发字节数，计算差值得到实时速度，再统计指定时间段内的极值：

• 不同系统需调用对应命令获取字节数：macOS/Linux用ifconfig，Windows用netstat
• 每秒采样一次，记录速度值，最后计算最小、最大、平均值

示例（macOS/Linux）：

const { exec } = require('child_process');

// 获取指定网络接口的收发字节数
function getInterfaceBytes(interfaceName = 'en0') {
  return new Promise((resolve, reject) => {
    exec(`ifconfig ${interfaceName}`, (err, stdout) => {
      if (err) reject(err);
      const rxBytes = stdout.match(/RX bytes:(\d+)/)?.[1] || 0;
      const txBytes = stdout.match(/TX bytes:(\d+)/)?.[1] || 0;
      resolve({
        rx: parseInt(rxBytes),
        tx: parseInt(txBytes)
      });
    });
  });
}

// 监控指定时间段内的下载速度
async function monitorDownloadSpeed(interfaceName = 'en0', duration = 60) {
  const speeds = [];
  let prevBytes = await getInterfaceBytes(interfaceName);

  const interval = setInterval(async () => {
    const currBytes = await getInterfaceBytes(interfaceName);
    // 计算每秒下载速度（KB/s）
    const speed = (currBytes.rx - prevBytes.rx) / 1024;
    speeds.push(speed);
    prevBytes = currBytes;
  }, 1000);

  setTimeout(() => {
    clearInterval(interval);
    console.log({
      最小下载速度: Math.min(...speeds).toFixed(2) + ' KB/s',
      最大下载速度: Math.max(...speeds).toFixed(2) + ' KB/s',
      平均下载速度: (speeds.reduce((a, b) => a + b, 0) / speeds.length).toFixed(2) + ' KB/s'
    });
  }, duration * 1000);
}

3. 利用Chrome DevTools Protocol（CDP）捕获精准网络请求数据 #

Electron的渲染进程基于Chrome，可通过CDP获取每个网络请求的详细统计（延迟、流量等）：

• 在主进程中启用CDP的Network域，监听请求的生命周期事件
• 记录请求开始/结束时间，计算延迟，统计总上传/下载量

const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
  const win = new BrowserWindow();
  win.loadFile('index.html');

  // 初始化请求计时存储
  global.requestTimings = {};

  // 附加CDP并启用Network域
  win.webContents.debugger.attach('1.3');
  win.webContents.debugger.sendCommand('Network.enable');

  // 监听CDP消息
  win.webContents.debugger.on('message', (_, method, params) => {
    // 记录请求开始时间
    if (method === 'Network.requestWillBeSent') {
      global.requestTimings[params.requestId] = { startTime: Date.now() };
    }

    // 计算请求延迟
    if (method === 'Network.responseReceived') {
      const timing = global.requestTimings[params.requestId];
      if (timing) {
        const latency = Date.now() - timing.startTime;
        console.log(`请求 ${params.request.url} 延迟: ${latency}ms`);
        delete global.requestTimings[params.requestId];
      }
    }
  });
});

4. 第三方库简化实现 #

如果不想手动处理底层逻辑，可使用成熟的Node.js库：

• speedtest-net：调用Speedtest.net服务测试网络上下行速度
• network-speed：封装了网络速度统计的工具类

注意：使用第三方库时需确认与当前Electron版本的兼容性，部分库可能需要在主进程中运行。

内容的提问来源于stack exchange，提问作者SeaWarrior404