客户端速度测试答案

【问题标题】：Client-side Speed Test客户端速度测试
【发布时间】：2019-01-21 17:08:28
【问题描述】：

我正在尝试构建一个应用程序，允许用户在他们连接的 WiFi 网络上运行速度测试。

显然这是可行的。有许多这样的独立测速应用：例如 Speedtest.net 和 Google。

NPM 上有很多速度测试模块，但这些只在服务器上有效，对我的项目没有帮助。

当我对这些模块中的任何一个进行 Webpack / Browserify 并尝试在浏览器中运行代码时，它不起作用。我收到跨域错误。

我需要做什么来执行（可靠的）客户端速度测试？我还没有找到一个明确的例子来实现这样的事情。

理想情况下，我可以使用诸如 speedtest.net 或 Google 之类的第 3 方 API，但如前所述，我在尝试此操作时遇到跨源错误。

【问题讨论】：

要从浏览器执行跨源请求，您需要远程服务器允许使用 CORS 进行跨源请求，或者您需要与代码运行同源的代理。
顺便说一句，我不确定你在他们连接的 WiFi 网络上运行速度测试是什么意思。
@ErickRuizdeChavez 运行速度测试，测试您连接的网络的速度。比如你在speedtest.net点击“GO”按钮，它会测试并报告你网络的上传速度、下载速度和ping。
@ErickRuizdeChavez 代理将如何工作？它会测试客户端或代理的网络吗？
我记得我不久前（可能是 10 多年）用闪存做了一些基本的下载速度测试。这个想法是在服务器上有一个文件（你事先知道大小），然后根据下载的百分比与经过的时间计算速度。上传速度测试更难，因为直到最后都没有进度报告，当时我们最终获得了 Ookla 的许可。

标签： javascript node.js npm cross-domain speed-test

【解决方案1】：

好的，我从一个 MDN 示例中改编了这个，以进行一个非常简单且很可能不准确的下载速度测试。它在浏览器上 100% 运行，由于现在一切都是本地的，所以速度太快了，所以在 Chrome 中，您可以启用节流以获得更真实的体验。

在服务器中，我有一个重约 3 MB 的 text.txt 文件。在同一服务器和路径上，我有以下代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <div>
    Progress: <span class="progress">0%</span>
  </div>

  <div>
    File size: <span class="size">...</span>
  </div>

  <div>
    Total time: <span class="time">...</span>
  </div>

  <div>
    Speed: <span class="speed">...</span>
  </div>

  <script>
    const start = Date.now();
    const url = 'text.txt';
    const xhr = new XMLHttpRequest();
    let end;
    let size;
    let time;

    xhr.addEventListener("progress", updateProgress);
    xhr.addEventListener("load", transferComplete);
    xhr.addEventListener("error", transferFailed);
    xhr.addEventListener("abort", transferCanceled);

    xhr.open('GET', url);
    xhr.send();


    function updateProgress(oEvent) {
      if (oEvent.lengthComputable) {
        if (!size) {
          size = oEvent.total;
          document.querySelector('.size').innerHTML = `${Number.parseFloat(size / 1024 / 1024).toFixed(2)} MB`;
        }

        var percentComplete = oEvent.loaded / oEvent.total * 100;
        document.querySelector('.progress').innerHTML = `${parseInt(percentComplete, 10)}%`;
      }
    }

    function transferComplete(evt) {
      console.log('The transfer is complete.');
      end = Date.now();

      time = (end - start) / 1000;
      document.querySelector('.time').innerHTML = `${parseInt(time, 10)} seconds`;
      document.querySelector('.speed').innerHTML = `${Number.parseFloat(size / time / 1024).toFixed(2)} kB/s`;
    }

    function transferFailed(evt) {
      console.log('An error occurred while transferring the file.');
    }

    function transferCanceled(evt) {
      console.log('The transfer has been canceled by the user.');
    }

  </script>
</body>

</html>

【讨论】：

是的，我也尝试过这种方法。但就像你说的那样，它可能非常不准确，我需要可靠的测量。正如你所提到的，我正在研究 Ookla（他们实际上是 speedtest.net 的主机）。看起来我可以将他们的小程序嵌入到我的应用程序中。不理想，但也许我可以做到。
我试过你上面的代码，如果我们把3MB的图像放在不同的服务器上，结果很好。上传测试怎么样？