Clock on webpage using server and system time?

javascript ajax vb.net clock clock-synchronization

32,123

Solution 1

The way I've gone about this before is:

Take the time from the server,
Take the time from the client (immediately)
Get an offset.
When showing the clock, apply the offset to the current time on the client.

You only need to update this occasionally from the server.

The problem that you've got to sort out though is that in making a request to get the time from the server, there will be a lag before you can get the client time. You can probably minimize this by using an ajax request to get the server time and nothing else, thereby cutting overhead and network lag etc.

Solution 2

+Date.now() returns local ms since the Unix epoch. So:

Get time from server
Calculate difference between server time and local time
Update the clock every second or minute (depending on what you're displaying) by getting the local time and adjusting it using the difference
Every 15 mins update the difference.

Or something like that.

Here's a fiddle demonstrating the first half:

var serverTime = 1310127993162; //this would come from the server obviously
var localTime = +Date.now();
var timeDiff = serverTime - localTime;

setInterval(function () {
    console.log(+Date.now() + timeDiff);
}, 1000);

Solution 3

Server Time: <input type="text" id="clock" value="" size='8'>

<script type="text/javascript">
var serverTime = <?php echo time() * 1000; ?>; //this would come from the server
var localTime = +Date.now();
var timeDiff = serverTime - localTime;

setInterval(function () {
    var realtime = +Date.now() + timeDiff;
    var date = new Date(realtime);
    // hours part from the timestamp
    var hours = date.getHours();
    // minutes part from the timestamp
    var minutes = date.getMinutes();
    // seconds part from the timestamp
    var seconds = date.getSeconds();

    // will display time in 10:30:23 format
    var formattedTime = hours + ':' + minutes + ':' + seconds;

    $('#clock').attr('value',formattedTime); <-- input id=clock
}, 1000);
</script>

Solution 4

one idea is to response datetime on page when it is requested. like:

<html>
your serveside codes,
<script>
var serverdatetime = new Date("<%=Datetime.Now%>");
//use serverdatetime and update it after 15 mins.

// you can use ajax to get datetime
setTimeout(function(){
    $.ajax({
  url: 'http://yourhost.com/getdate',
  success: function( data ) {
    // use data and update serverdatetime
  }
});},54000);
</script>
server codes

</html>

**note : this is idea only, code may not work

View more solutions

32,123

Author by

Shawn

Updated on November 17, 2020

Comments

Shawn over 3 years

I need to add a clock to a web page. The clock needs to be synchronized with a server but I really don't want to have it constantly check the server as the page will be open 24/7 on several PCs. Is there some way to get the time from the server and then use the systems clock to keep it updated and check the server every 15 minutes or so to keep it synced?
Shawn almost 13 years

Marking this as answer because this is what I decided to go with.
crmpicco over 7 years

Could you add an explanation?
M.M over 7 years

explanation added line by line