客户端速度测试
客户端速度测试
提问于 2018-08-15 03:05:48
我正在尝试构建一个应用程序，允许用户在他们连接的WiFi网络上运行速度测试。
显然，这是可行的。有许多这样的独立速度测试应用程序:例如Speedtest.net和谷歌。
在NPM上有许多速度测试模块，但这些模块只在服务器上工作，这对我的项目没有帮助。
当我将这些模块中的任何一个/浏览器序列化，并尝试在浏览器中运行代码时，它不起作用。我得到了交叉原点错误。
要执行(可靠的)客户端速度测试，我需要做什么？我还没有找到一个明确的例子来实现这样的东西。
理想情况下，我应该能够使用像speedtest.net或谷歌这样的第三方应用程序接口，但是，正如前面提到的，当我尝试这样做时，我得到了跨源代码的错误。
回答 1
Stack Overflow用户
发布于 2018-08-15 04:35:29
好的，我从一个MDN例子中改写了这段代码，用来做一个非常简单但很可能不准确的下载速度测试。它100%在浏览器上运行，因为现在一切都是本地的，所以速度太快了，所以在Chrome中你可以启用节流来获得更真实的体验。
在服务器中，我有一个重约3MB的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51848255
复制相关文章
相似问题