-3

Network Information API is an experiment feature.

Is there any existing way to get network information (e.g. 4g/5g/wifi, uplink/downlink, rtt, latency)? I would like to show the info in my React component for all popular browsers (chrome, firefox, safari).

const [networkInformation, setNetworkInformation] = useState({});

useEffect(() => {
  setInterval(() => {
    setNetworkInformation({
      networkType: getNetworkType(), // returns like 4g/5g/wifi,
      uplink: getUplink(), // returns like 100 for 100kbps
      downlink: getDownlink(), // same as uplink
      rtt: getRtt(), // returns like 75 for 75ms
    });
  }, 2000);
}, []);

return (<div>{JSON.stringify(networkInformation)}</div>);

How to implement getNetworkType, getUplink, getDownlink, getRtt?

Mike
  • 173
  • 4
  • 14
  • Unfortunately, asking for tools, software, or off-site resources is off-topic for StackOverflow. Please see [help/on-topic] for more info. – evolutionxbox May 12 '21 at 10:22
  • @evolutionxbox I am asking how to write javascript code without using MDN API, why would you think I am asking for tools/software? – Mike May 13 '21 at 06:51
  • Without the network information API there is only off-site tools and libraries left. – evolutionxbox May 13 '21 at 08:43
  • 2
    @evolutionxbox network information API is only available for chrome now, how can I get information for safari and firefox? – Mike May 13 '21 at 14:23
  • Check if [How do I check connection type (WiFi/LAN/WWAN) using HTML5/JavaScript?](https://stackoverflow.com/q/11701328/2873538). But, It is not going to work on all browsers. – Ajeet Shah May 13 '21 at 14:33
  • 2
    @AjeetShah what about [PerformanceResourceTiming](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming#browser_compatibility) `window.performance.getEntriesByType('resource')`? – Mike May 13 '21 at 14:41
  • That may work as a workaround. Docs say: *An application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource, such as an XMLHttpRequest, ``, image, or script.* So, one may guess the type of connection based on the time it took to load the (a sample) resource. You can try. – Ajeet Shah May 13 '21 at 14:49

1 Answers1

0
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.effectiveType;
console.log(type);

type will be your connection type here. To know more about this click here

Mohammad Masood Alam
  • 403
  • 5
  • 14