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

Question

I want to gather some information using the visitors of my websites.
What I need is for each visitor to ping 3 different hostnames and then save the following info into a DB.

Visitor IP, latency 1,latency 2, latency 3

Of course everything has to be transparent for the visitor without interrupting him in any way. Is this possible? Can you give me an example? Are there any plugins for jQuery or something to make it easier

EDIT

This is what I have so far jsfiddle.net/dLVG6 but the data is too random. It jumps from 50 to 190

Answer 1

This is going to be more of a pain that you might think.

Your first problem is that Javascript doesn't have ping. Mostly what Javascript is good at is HTTP and a few cousin protocols.

Second problem is that you can't just issue some ajax requests and time the results (that would be way too obvious). The same origin policy will prevent you from using ajax to talk to servers other than the one the page came from. You'll need to use JSONP, or change the src of an image tag, or something else more indirect.

Your third problem is that you don't want to do anything that will result in a lot of data being returned. You don't want data transfer time or extensive server processing to interfere with measuring latency.

Fourth, you can't ask for URLs that might be cached. If the object happened to be in the cache, you would get really low "latency" measurements but it wouldn't be meaningful.

My solution was to use an image tag with no src attribute. On document load, set the src to point to a valid server but use an invalid port. Generally, it is faster for a server to simply reject your connection than to generate a proper 404 error response. All you have to do then is measure how long it takes to get the error event from the image.

From The Filddle :

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");
});

The technique could probably be improved. Here's some ideas:

1. Use IP address instead of DNS host name.
2. Do the "ping" multiple times, throw out the highest and lowest scores, then average the rest.
3. If your web page has a lot heavy processing going on, try to do the tests when you think the UI load is lightest.

Answer 2

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

Answer 3

2021:

Tried this again for a React app I'm building. I don't think the accuracy is too great.

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

Wrote my own little API, but I suppose there's just way too much going on during the request.

In terminal, I get about 23ms ping to my server.. using this it shoots up to like 200-500ms.