如何使用javascript在浏览器中测试从用户到服务器的延迟？

Question

我想使用我网站的访问者收集一些信息。
我需要的是让每个访问者 ping 3 个不同的主机名，然后将以下信息保存到数据库中。

Visitor IP, latency 1,latency 2, latency 3

当然，一切都必须对访问者透明，而不能以任何方式打扰他。 这可能吗？ 你可以给我一个例子吗？ 是否有任何 jQuery 插件或使其更容易的东西

编辑

这是我到目前为止jsfiddle.net/dLVG6 所拥有的，但数据太随机了。 它从 50 跃升至 190

Answer 1

这会比你想象的更痛苦。

您的第一个问题是 Javascript 没有 ping。 Javascript 擅长的主要是 HTTP 和一些表亲协议。

第二个问题是你不能只发出一些 ajax 请求并对结果进行计时（这太明显了）。 同源策略将阻止您使用 ajax 与页面来自的服务器以外的服务器通信。 您需要使用 JSONP，或更改图像标签的 src，或其他更间接的方法。

您的第三个问题是您不想做任何会导致返回大量数据的事情。 您不希望数据传输时间或大量服务器处理干扰测量延迟。

第四，您不能要求可能缓存的 URL。 如果对象碰巧在缓存中，您将获得非常低的“延迟”测量值，但这没有意义。

我的解决方案是使用没有src属性的图像标签。 在文档加载时，将src设置为指向有效服务器但使用无效端口。 通常，服务器简单地拒绝您的连接比生成正确的 404 错误响应更快。 您所要做的就是测量从图像中获取错误事件所需的时间。

来自小提琴：

var start = new Date().getTime();
$('#junkOne').attr('src', 'http://fate.holmes-cj.com:8886/').error(function () {
    var end = new Date().getTime();
    $('#timer').html("" + (end - start) + "ms");
});

这项技术可能会得到改进。 这里有一些想法：

1. 使用 IP 地址而不是 DNS 主机名。
2. 多次“ping”，扔掉最高和最低的分数，然后平均其余的分数。
3. 如果您的网页正在进行大量繁重的处理，请尝试在您认为 UI 负载最轻时进行测试。

Answer 2

使用jQuery你可以： $.ajax(url,settings) （ http://api.jquery.com/jQuery.ajax/ ），并采取从时间beforeSend和complete通过Date.now()减去那些时代- >然后你有时间请求（虽然不完全是“Ping”）

Answer 3

2021 年：

为我正在构建的 React 应用程序再次尝试了这个。 我不认为准确性太大。

const ping = () => {
    var start = new Date().getTime();
    api.get('/ping').then((res) => {
        console.log(res)
        var end = new Date().getTime();
        console.log(`${end-start} ms`)
    }, (err) => {
        console.log(err)
    })
};

编写了我自己的小 API，但我想在请求期间发生的事情太多了。

在终端中，我对我的服务器的 ping 时间大约为 23 毫秒。使用它可以达到 200-500 毫秒。