请问亲前端如何实现ping的工具呢？

Question

react中很想做一个类似cmd上的ping的功能：

nono@MacBook-Air Downloads % ping 8.8.8.8
PING 8.8.8.8 (8.8.8.8): 56 data bytes
64 bytes from 8.8.8.8: icmp_seq=0 ttl=54 time=78.295 ms
64 bytes from 8.8.8.8: icmp_seq=1 ttl=54 time=76.225 ms
64 bytes from 8.8.8.8: icmp_seq=2 ttl=54 time=80.911 ms
64 bytes from 8.8.8.8: icmp_seq=3 ttl=54 time=76.925 ms

请问是否有对应的三方包来做到呢？或者用什么方式可以实现呢 ?

Answer 1

目测是不能实现的，ping本身是基于icmp协议的，这个在浏览器里面没法实现。在浏览器里面也没办法拿到ttl这个参数。

现在浏览器上能看到的ping，大概率是发起HTTP请求，然后获取响应时间，也可能是服务端帮忙ping，然后显示在前端。

Answer 2

需要借助服务端语言的实现，然后返回给前端去呈现。纯前端没法做到。

Answer 3

简单的你可以直接自己弄一个就行了,我写个差不多意思的demo,你可以细节打磨一下,加个循环,获取一下应该就行了,第三方包的话,你可以看看这个https://github.com/danielzzz/node-ping 但是应该不符合你的需求

      const url = "https://baidu.com"
      const startTime = new Date().getTime();
      const response = await fetch(url); 
      const endTime = new Date().getTime();
      const elapsed = endTime - startTime;
      console.log('Ping time:', elapsed, 'ms');