Member Avatar for nonshatter

Hey guys,

I am in need of a live real-time clock to count down to zero depending on the length of days specified in a database (Like an auction count-down timer).
For example, I can retrieve the length of time specified in the database, somehow put that value into the clock and then let the timer count down to zero. Is there a particular scripting language I should be using for this E.g. Javascript/AJAX etc? Does anyone know the best way to achieve this sort of functionality?

Your advice is much appreciated. Many thanks,
nonshatter

  • 2 Contributors
  • 4 Replies
  • 719 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by nonshatter

Dani AI

Generated

Short answer: store an absolute expiry time on the server (UTC) and have the browser display the countdown by computing the difference between that server time and the client clock — but correct the client clock with a small server-derived offset so every user sees the same remaining time. PHP + JavaScript is a perfectly fine stack for this: PHP can emit a Unix/ISO expiry timestamp, and the browser can use the Date API to compute and render the remaining interval. (php.net)

Recommended workflow (conceptual)

  1. Persist an absolute end time in the database in UTC (Unix timestamp or ISO 8601).
  2. When the page loads (or via an API), return the server time and the auction end time in the same format.
  3. On the client measure request round‑trip (T0 before request, T1 after response) and estimate server offset as serverTime + (T1-T0)/2 — the classic Cristian approach — to reduce one‑way latency error. Use that offset to compute remaining = endTime - (Date.now() + offset). Repeat a short resync occasionally and on visibility/focus changes. (en.wikipedia.org)

Practical notes and pitfalls

  • Never rely on the user’s local clock alone; always use the server-supplied absolute timestamp as ground truth. (php.net)
  • Update the displayed remaining time by computing it each tick from the absolute values (don’t just decrement a local counter — that drifts).
  • Browser timers are throttled in background tabs, so resync when the page becomes visible (visibilitychange) or when the tab regains focus, and always treat the server as the final arbiter. (developer.mozilla.org)

Scaling and precision
For most auctions a periodic AJAX resync is sufficient. For sub-second accuracy or immediate server-driven endings, push from the server (WebSocket or Server‑Sent Events) avoids polling and guarantees all clients get the final “closed” message simultaneously. Always enforce the auction end on the server before accepting bids. (developer.mozilla.org)

Notes tied to the thread: ’s plugin idea is fine for UI, but it still needs a server-supplied absolute end time; ’s synchronization concern is solved by sending server timestamps plus an RTT/offset adjustment and periodic resyncs.

Recommended Answers

All 4 Replies

Member Avatar for fxm

scripting language

Google for "javascript countdown".

Member Avatar for nonshatter

Thanks,
I know there are an abundance of javascript countdown clocks available on the web. I think I'm able to devise one, but my problem is that all my users must be syncronised to the same server (mysql server if possible?). Would this be achievable using PHP Javascript?
Thanks

Member Avatar for fxm

users must be syncronised to the same server

There is also an abundance of these

Member Avatar for nonshatter

Thanks for your response fxm.

Have you used this script before? I have never used JQuery - How exactly does this all work? I'm a little bit confused... If I have my html page with the <div> sections, along with the jQuery script, how could I 'plug-in' the 'time remaining' values from my database and let the user synchronise with my server time? Also, what is JSON data? Are you able to elaborate a little more on this?
Thanks

<html>
<head>
</head>
<body>
<div id="imclock"></div>
<div id="time_href" style="display:none"></div>
</body>
</html>
<script type="text/javascript">
$(function(){
  $('#imclock').imclock();
});


(function($) {

   $.fn.imclock = function(options) {
     var settings = jQuery.extend({
                                    name: "defaultName",
                                    size: 5
                                  }, options);
     var version = '1.4.0';
     return $.fn.imclock.start($(this), null);
   };

   // TODO 2: sepparate time setting interval and clock starting
   $.fn.imclock.start = function(element, time) {
     if (time == null)
     {
       var time = $.fn.imclock.getServerTime(element);
     }
     else
     {
       time.setSeconds(time.getSeconds() + 1);
     }
     var hours = time.getHours();
     var minutes = time.getMinutes();
     var seconds = time.getSeconds();

     if (minutes<10) {
       minutes = '0' + minutes;
     }
     if (seconds<10) {
       seconds = '0' + seconds;
     }

     element.html(hours+ ":" + minutes + ":" + seconds);
     element.timerID = setTimeout(function(){$.fn.imclock.start(element, time);},1000);
   };

   // This is the function that gets the actual time from the server
   // time is expected to be returned as JSON data in field named "time"
   // For example the request could look like this:
   // {
   //  some_data: "lorem",
   //  time : 2010-12-12T12:23
   // }
   $.fn.imclock.getServerTime = function(element) {
     var time = null;
     if ($("#time_href").length) {
       var url = $("#time_href")[0].innerHTML;
       $.getJSON(url, function(data) {
                   if (data){
                   time = new Date(Date.parse(data.time));                     
                   }
                 });
     }
     if (time == null) {
       time = new Date();
     }
     return time;
   };

 })(jQuery);
</script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.