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

Question

我构建了一个小型 React 网络应用程序，我注意到一些用户不断流失。

我知道 fast.com 似乎通过让客户端下载文件然后上传来测量网络速度。

是否可以为我的 React Web 应用程序做类似的事情？

Answer 1

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

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

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

在你的主函数中使用 react-hooks

export default function App(){

 [isActive, startActiviating] = useState(false);

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

Answer 2

我找到了this

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)}
          />
}

callbackFunctionOnNetworkTest 将在每 pingInterval 之后运行并为您提供互联网速度。建议使用服务器的 imageUrl 及其 downloadSize [1]: https://www.npmjs.com/package/react-internet-meter

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

Can I measure my users' internet speed in my react web app?

reactjs

performance

react-native

pagespeed