我可以在我的反应网络应用程序中测量用户的互联网速度吗？

Question

我构建了一个小型的react web应用程序，我注意到一些用户不断减少。

我知道fast.com似乎是通过让客户端下载一个文件然后上传来衡量网速的

如果对我的react web应用程序做这样的事情可行吗？

Answer 1

是。你当然可以做到。而是下载和上传需要某种提示的文件。

您可以做的是从url加载一个已知大小的图像<Image source={someURL}/>，并显示给用户。您的应用程序徽标可以工作。它不会100%准确，但它会得到你想要的，并在加载前启动timer，在加载后完成计时器。你可以根据功能组件或测量时间的类使用react hooks或didComponentMount。

const CalculateTime = (time) => {
const mins = Math.floor(time/60);
const secs = time-mins*60;
//you can calculate milliseconds etc...
return (mins, secs);
}

在主要功能中使用react钩子

export default function App(){
[isActive, startActiviating] = useState(false);

当然，从return ()调用函数并计算时间。

Answer 2

我发现了这个

import { ReactInternetSpeedMeter } from 'react-internet-meter'
import 'react-internet-speed-meter/dist/index.css'
const App = () => {
<ReactInternetSpeedMeter  
txtSubHeading="Internet is too slow"
outputType="alert"
customClassName={null}
txtMainHeading="Opps..." 
pingInterval={4000} // milliseconds 
thresholdUnit='megabyte' // "byte" , "kilobyte", "megabyte" 
threshold={100}
imageUrl="https://res.cloudinary.com/dcwxsms2l/image/upload/v1610376487/pexels-ivan-samkov-6291574_bzqgps.jpg"
downloadSize="1781287"  //bytes
callbackFunctionOnNetworkDown={(speed)=>console.log(`Internet speed is down ${speed}`)}
callbackFunctionOnNetworkTest={(speed)=>setwifiSpeed(speed)}
/>
}

CCD_ 6将在每个CCD_ 7之后运行，并将为您提供互联网的速度。建议使用服务器的imageUrl及其下载大小[1]：https://www.npmjs.com/package/react-internet-meter