Question

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

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

NPM上有很多速度测试模块，但是它们只能在服务器上运行，这对我的项目没有帮助。

当我Webpack / Browserify这些模块中的任何一个并尝试在浏览器中运行代码时，它将无法正常工作。我收到跨源错误。

要执行（可靠的）客户端速度测试，我需要做什么？我还没有找到实现此类目标的清晰示例。

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

Answer 1

好吧，我从MDN示例中修改了此代码，以进行非常简单且最有可能不准确的下载速度测试。它可以在浏览器上100％运行，并且由于目前所有内容都是本地的，因此速度太快，因此在Chrome中，您可以启用限制功能以获得更逼真的体验。

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

<!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>

客户端速度测试

1 个答案: