ASP.NET Web应用中检测服务端与客户端网络连接质量的方法

核心逻辑 #

• 前端页面新增触发按钮，用户点击后自动完成全链路检测，结果可直接展示给用户，也可同步上报到后台留存
• 检测指标覆盖服务端访问延迟（类ping效果）、丢包率、上下行带宽三类，可直接定位是客户端网络问题还是服务端故障

前端代码实现 #

HTML部分 #

<!-- 检测触发按钮和结果展示区域 -->
<button id="networkTestBtn">检测网络连接质量</button>
<div id="testResult" style="margin-top: 10px;"></div>

JavaScript逻辑 #

// 替换为你自身服务端对应的测试资源地址
const TEST_CONFIG = {
  pingUrl: 'https://你的域名/test/1px.png', // 小于1KB的极小静态资源，用于ping检测
  downloadTestUrl: 'https://你的域名/test/1mb_test.bin', // 固定1MB大小的静态文件，用于下行测速
  uploadTestUrl: 'https://你的域名/test/upload_receive', // 支持POST的空接口，用于上行测速
  pingTestCount: 5, // ping检测的重复次数，降低误差
  uploadTestSize: 1024 * 1024 // 上行测试用的数据包大小，默认为1MB
}

const testBtn = document.getElementById('networkTestBtn')
const resultBox = document.getElementById('testResult')

testBtn.addEventListener('click', async () => {
  testBtn.disabled = true
  resultBox.innerText = '检测中，预计10秒内完成，请稍候...'
  const testResult = {}

  // 1. 计算到服务端的平均延迟和丢包率
  const pingRecords = []
  for (let i = 0; i < TEST_CONFIG.pingTestCount; i++) {
    const startTime = Date.now()
    try {
      await fetch(TEST_CONFIG.pingUrl, { cache: 'no-store' })
      pingRecords.push(Date.now() - startTime)
    } catch (err) {
      pingRecords.push(null)
    }
  }
  const validPing = pingRecords.filter(item => item !== null)
  testResult.avgPing = validPing.length ? Math.round(validPing.reduce((a,b) => a + b, 0) / validPing.length) : 0
  testResult.lossRate = ((TEST_CONFIG.pingTestCount - validPing.length) / TEST_CONFIG.pingTestCount * 100).toFixed(1) + '%'

  // 2. 计算下行带宽
  let downloadSpeed = 0
  try {
    const downloadStart = Date.now()
    const res = await fetch(TEST_CONFIG.downloadTestUrl, { cache: 'no-store' })
    const fileBlob = await res.blob()
    const costTime = (Date.now() - downloadStart) / 1000
    downloadSpeed = (fileBlob.size / costTime / 1024 / 1024 * 8).toFixed(2)
  } catch (err) {}
  testResult.downloadSpeed = downloadSpeed + ' Mbps'

  // 3. 计算上行带宽
  let uploadSpeed = 0
  try {
    const uploadData = new Blob([new Uint8Array(TEST_CONFIG.uploadTestSize)])
    const uploadStart = Date.now()
    await fetch(TEST_CONFIG.uploadTestUrl, {
      method: 'POST',
      body: uploadData,
      cache: 'no-store'
    })
    const costTime = (Date.now() - uploadStart) / 1000
    uploadSpeed = (TEST_CONFIG.uploadTestSize / costTime / 1024 / 1024 * 8).toFixed(2)
  } catch (err) {}
  testResult.uploadSpeed = uploadSpeed + ' Mbps'

  // 4. 故障判定
  let conclusion = ''
  if (validPing.length === 0 || testResult.avgPing > 300 || Number(testResult.lossRate) > 30 || Number(downloadSpeed) < 0.5) {
    conclusion = '当前客户端网络环境较差，是导致访问慢的主要原因'
  } else if (testResult.avgPing < 100 && Number(downloadSpeed) > 2) {
    conclusion = '客户端网络正常，大概率为服务端故障导致访问慢'
  } else {
    conclusion = '网络链路存在波动，建议多次检测确认结果'
  }
  testResult.conclusion = conclusion

  // 渲染结果，可自行修改此处逻辑将testResult上报到后台
  resultBox.innerHTML = `
    <p>平均延迟：${testResult.avgPing}ms</p>
    <p>丢包率：${testResult.lossRate}</p>
    <p>下行速率：${testResult.downloadSpeed}</p>
    <p>上行速率：${testResult.uploadSpeed}</p>
    <p><strong>判定结果：${testResult.conclusion}</strong></p>
  `
  testBtn.disabled = false
})

服务端配套配置 #

• 准备对应的三个测试资源，全部配置Cache-Control: no-cache, no-store, must-revalidate响应头，禁用缓存避免影响检测结果准确性
• 所有测试资源配置允许站点域名的跨域请求，避免CORS报错
• 上行测试用的空接口无需存储接收的数据包，直接返回200状态码即可

判定规则说明 #

• 客户端网络问题：平均延迟高于300ms、丢包率高于30%、下行速率低于0.5Mbps满足任意一项即可判定
• 服务端故障：平均延迟低于100ms、下行速率高于2Mbps的前提下，站点实际业务接口请求耗时仍高于2s即可判定

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