Javascript 客户端速度测试
我正在尝试构建一个应用程序，允许用户在连接到的WiFi网络上运行速度测试 显然，这是可行的。有很多这样的独立的speedtest应用程序：例如speedtest.net和Google NPM上有许多速度测试模块，但这些模块只在服务器上工作，这对我的项目没有帮助 当我对这些模块进行网页打包/浏览，并尝试在浏览器中运行代码时，它不起作用。我有交叉原点错误 我需要做什么来执行（可靠的）客户端速度测试？我还没有找到一个明确的例子来说明这样的实现Javascript 客户端速度测试,javascript,node.js,npm,cross-domain,speed-test,Javascript,Node.js,Npm,Cross Domain,Speed Test,我正在尝试构建一个应用程序，允许用户在连接到的WiFi网络上运行速度测试 显然，这是可行的。有很多这样的独立的speedtest应用程序：例如speedtest.net和Google NPM上有许多速度测试模块，但这些模块只在服务器上工作，这对我的项目没有帮助 当我对这些模块进行网页打包/浏览，并尝试在浏览器中运行代码时，它不起作用。我有交叉原点错误 我需要做什么来执行（可靠的）客户端速度测试？我还没有找到一个明确的例子来说明这样的实现 理想情况下，我可以使用第三方API，如speedtest.
理想情况下，我可以使用第三方API，如speedtest.net或Google，但是，如前所述，当我尝试此操作时，会出现跨源错误。好的，我从MDN示例中修改了此操作，以进行非常简单且极有可能不准确的下载速度测试。它100%在浏览器上运行，因为现在所有东西都是本地的，速度太快了，所以在Chrome中，你可以启用节流功能来获得更真实的体验 在服务器中，我有一个text.txt文件，重量约为3MB。在相同的服务器和路径上，我有以下代码：
<!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>
文件
进度：0%
文件大小：。。。
总时间：。。。
速度：。。。
const start=Date.now（）；
常量url='text.txt'；
const xhr=new XMLHttpRequest（）；
让我们结束；
让大小；
让时间；
xhr.addEventListener（“进度”，updateProgress）；
xhr.addEventListener（“加载”，传输完成）；
xhr.addEventListener（“错误”，传输失败）；
xhr.addEventListener（“中止”，转移已取消）；
xhr.open（'GET'，url）；
xhr.send（）；
函数更新进程（oEvent）{
if（oEvent.Length可计算）{
如果（！大小）{
尺寸=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）}%`；
}
}
功能转移完成（evt）{
log（'传输完成'）；
end=Date.now（）；
时间=（结束-开始）/1000；
document.querySelector（'.time'）.innerHTML='${parseInt（time，10）}秒'；
document.querySelector（'.speed'）.innerHTML=`${Number.parseFloat（size/time/1024）.toFixed（2）}kB/s`；
}
函数传输失败（evt）{
console.log（'传输文件时出错'）；
}
功能转移已取消（evt）{
log（'用户已取消传输'）；
}