客户端速度测试 [英] Client-side Speed Test
问题描述
我正在尝试构建一个应用程序，该应用程序允许用户在所连接的WiFi网络上运行速度测试.
I am attempting to build an application that allows users to run a speedtest on the WiFi network they are connected to.
显然这是可行的.有很多这样的独立式Speedtest应用程序:例如Speedtest.net和Google.
Obviously this is doable. There are many such stand alone speedtest apps: Speedtest.net and Google for example.
NPM上有很多速度测试模块，但是它们只能在服务器上运行，这对我的项目没有帮助.
There are many speed test modules on NPM but these only work on the server which isn't helpful for my project.
当我Webpack/Browserify这些模块中的任何一个并尝试在浏览器中运行代码时，它将无法正常工作.我收到跨原点错误.
When I Webpack / Browserify any of these modules and try to run the code within the browser it doesn't work. I get Cross Origin errors.
要执行(可靠的)客户端速度测试，我需要做什么?我还没有找到一个清晰的例子来说明这种事情的实现.
What do I need to do to perform (reliable) client side speed tests? I haven't been able to find an clear examples of an implementation of something like this.
理想情况下，我可以使用speedtest.net或Google之类的第三方API，但如上所述，尝试此操作时会遇到跨源错误.
Ideally, I'd be able to use a 3rd party API like speedtest.net or Google but, as mentioned, I'm getting cross origin errors when I try this.
推荐答案
好，我从MDN示例中修改了此代码，以进行非常简单且最有可能不准确的下载速度测试.它可以在浏览器上100％运行，并且由于目前所有内容都是本地的，所以速度太快了，因此在Chrome中，您可以启用限制功能以获得更逼真的体验.
Ok, I adapted this from an MDN example to do a very simple and most likely inaccurate download speed test. It runs 100% on the browser and since everything is local for now speeds are too fast, so in Chrome you can enable throttling to get a more realistic experience.
在服务器中，我有一个text.txt文件，其重量约为3 MB.在同一服务器和路径上，我有以下代码:
In the server I have a text.txt file that weights about 3 MB. On the same server and path I have the following code:
<!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>
这篇关于客户端速度测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
