Skip to content

Instantly share code, notes, and snippets.

@ethaizone
Last active December 16, 2022 12:37
Show Gist options
  • Star 20 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save ethaizone/6abb1d437dbe406fbed6 to your computer and use it in GitHub Desktop.
Save ethaizone/6abb1d437dbe406fbed6 to your computer and use it in GitHub Desktop.
Sync server time to client browser with JS. Implement follow Network Time Protocol.
// Thanks http://stackoverflow.com/questions/1638337/the-best-way-to-synchronize-client-side-javascript-clock-with-server-date
var serverTimeOffset = false;
function getServerTime(callback) {
if (serverTimeOffset === false) {
var scripts = document.getElementsByTagName("script"),
URL = scripts[scripts.length - 1].src;
var clientTimestamp = Date.parse(new Date().toUTCString());
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("HEAD", URL + "?noCache=" + Date.now(), true);
xmlhttp.onload = function(){
if (xmlhttp.readyState === 4) {
if (xmlhttp.status === 200) {
var serverDateStr = xmlhttp.getResponseHeader('Date');
var serverTimestamp = Date.parse(new Date(Date.parse(serverDateStr)).toUTCString());
var serverClientRequestDiffTime = serverTimestamp - clientTimestamp;
var nowTimeStamp = Date.parse(new Date().toUTCString());
var serverClientResponseDiffTime = nowTimeStamp - serverTimestamp;
var responseTime = (serverClientRequestDiffTime - nowTimeStamp + clientTimestamp - serverClientResponseDiffTime )/2;
serverTimeOffset = (serverClientResponseDiffTime - responseTime);
var date = new Date();
date.setTime(date.getTime() + serverTimeOffset);
callback.call(null, date);
} else {
console.error(xmlhttp.statusText);
}
}
};
xmlhttp.send(null);
} else {
var date = new Date();
date.setTime(date.getTime() + serverTimeOffset);
callback.call(null, date);
}
}
@ethaizone
Copy link
Author

ethaizone commented Jul 13, 2016

var clientTimeStamp = Math.floor(getServerTime() / 1000);

getServerTime(function(time){
console.log(time)
})

@sela
Copy link

sela commented Jul 28, 2016

I run it on Chrome and got the following warning Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
Have you noticed that warning?

@musakkhir
Copy link

I am getting the same error. Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

@ethaizone
Copy link
Author

ethaizone commented Mar 27, 2017

@sela @muskkir I just update code. This error cause from last update spec that force all xmlHttpRequest must call as async.

I just update code with callback. You can implement it as promise or reactive if you need.

@ddcq
Copy link

ddcq commented Jan 16, 2020

This maths are wrong but I don't know where:

serverClientRequestDiffTime = serverTimestamp - clientTimestamp;
serverClientResponseDiffTime = nowTimeStamp - serverTimestamp;
responseTime = (serverClientRequestDiffTime - nowTimeStamp + clientTimestamp - serverClientResponseDiffTime )/2;
serverTimeOffset = (serverClientResponseDiffTime - responseTime);
serverTimeOffset = nowTimeStamp - serverTimestamp - (serverClientRequestDiffTime - nowTimeStamp + clientTimestamp - serverClientResponseDiffTime )/2
serverTimeOffset = nowTimeStamp - serverTimestamp - (serverTimestamp - clientTimestamp - nowTimeStamp + clientTimestamp - (nowTimeStamp - serverTimestamp))/2
serverTimeOffset = nowTimeStamp - serverTimestamp - (serverTimestamp - nowTimeStamp - nowTimeStamp + serverTimestamp)/2
serverTimeOffset = nowTimeStamp - serverTimestamp - (2serverTimestamp - 2nowTimeStamp)/2
serverTimeOffset = nowTimeStamp - serverTimestamp - (serverTimestamp - nowTimeStamp)
serverTimeOffset = nowTimeStamp - serverTimestamp - serverTimestamp + nowTimeStamp
serverTimeOffset = 2*nowTimeStamp

@Hooponopono
Copy link

This maths are wrong but I don't know where:

serverClientRequestDiffTime = serverTimestamp - clientTimestamp;
serverClientResponseDiffTime = nowTimeStamp - serverTimestamp;
responseTime = (serverClientRequestDiffTime - nowTimeStamp + clientTimestamp - serverClientResponseDiffTime )/2;
serverTimeOffset = (serverClientResponseDiffTime - responseTime);
serverTimeOffset = nowTimeStamp - serverTimestamp - (serverClientRequestDiffTime - nowTimeStamp + clientTimestamp - serverClientResponseDiffTime )/2
serverTimeOffset = nowTimeStamp - serverTimestamp - (serverTimestamp - clientTimestamp - nowTimeStamp + clientTimestamp - (nowTimeStamp - serverTimestamp))/2
serverTimeOffset = nowTimeStamp - serverTimestamp - (serverTimestamp - nowTimeStamp - nowTimeStamp + serverTimestamp)/2
serverTimeOffset = nowTimeStamp - serverTimestamp - (2_serverTimestamp - 2_nowTimeStamp)/2
serverTimeOffset = nowTimeStamp - serverTimestamp - (serverTimestamp - nowTimeStamp)
serverTimeOffset = nowTimeStamp - serverTimestamp - serverTimestamp + nowTimeStamp
serverTimeOffset = 2*nowTimeStamp

try this:
A = B-C
D = E-B
G = (A-E+C-D)/2
F= D-G

F = (E-B)-(A-E+C-D)/2
= E-B -(B-C-E+C-E+B)/2
= E-B-(-2E+2B)/2 <== @ddcq
= E-B +E-B
= (E-B)*2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment