Search code examples
javascriptjquerytimestampreal-timenstimer

How do I get time-server live time via jQuery


In windows there is an option to correct the time via time-server(from time.windows.com). Is there an option to get that time server's time to a webpage with live update (I'm a beginner) using js or jQuery. This is not the local computer or webpage hosted server time. Thanks


Solution

  • This question is too broad, like asking "How do I develop a game? Like, a platforms one, with zombies.", but I'll try to reply it.

    ADVICE: There are some terms that if you don't know what they mean, you must look Google for them.

    The answer is simple: By connecting to that server and retrieving information.

    What options to connect to the server do you have in your hand?

    I can think about 3 options:

    • By doing an AJAX request.
    • Connecting via WebSockets.
    • Including a JavaScript file from the server.

    In all 3 methods the server MUST be prepared to serve datetime information for you, so you either go find a third party service that offers a method to get his datetime info or you prepare your own server.

    By doing an AJAX request

    This way is the typical one. You make an AJAX request to the server and get the information. You have two ways of getting the information: By directly returning the time data or by appending the time data to the headers and then reading the headers.

    For this to work the server needs CORS enabled for your domain. A difficult task if you are not the owner of the server.

    Connecting via WebSockets

    The same principle as AJAX applies. You need a server with WebSockets enabled. All modern browsers have a new kind of socket called WebSocket which allows them to connect to WebSocket-enabled servers and transfer realtime-data.

    With this method you will connect to a server and either directly receive the information or you send a message to receive the information. That totally depends on the server implementation.

    This method do not needs CORS.

    Including a JavaScript file from the server

    This method is a weird one, but can work. You append a <script> tag that loads a file located in the server, and the file contents is a variable with the information you want.

    What to do after you have the information

    Let's say that you done any of the 3 methods, and you have the information. The information can be a datetime ISO string or a epoch number. Those are the easiest ones as you can pass them directly to the Date constructor.

    You cannot do a new Date() and think that the difference will be autocalculated. new Date() always returns the local date and there's no a native method to "correct" it, so you must create your own correction method, so after you got the information, you need to extract the time difference.

    This is a simple as getting the local epoch time, the server epoch time and subtracting, like this:

    var servertimeinfo = "2015-06-21T22:44:06.296Z"; // This is the server time info. Can be an epoch or a ISO string, like I mentioned above.
    var servertime = new Date(servertime).getTime(); // With this you convert the server time to an epoch, so you always work in milliseconds
    var mytime = Date.now(); // With this you get the local computer epoch in milliseconds
    var diff = mytime - servertime; // And now you have the difference.
    

    With this difference you can recalculate the Date object each time you need it. How? You create a function that will look something like this:

    function newServerDate() {
        return new Date(Date.now() - diff);
    }
    

    So each time you need the date, instead of calling var date = new Date();, you must call var date = newServerDate();.

    So this is like doing a new Date() but will subtract the server time difference each time. Is what most of the libraries do actually, but since JavaScript has no native method, you have to implement it on your own.