Why this jQuery clock doesn't work properly to display the server-side time?

Question

I'd like to ask you guys why this jQuery clock it's working properly to display the server time but instead it displays the time on the PC when you browse the website (and I want to display only the server side time from machine).

jQuery1

         $(function($) {
          var pstOptions = {
            timeNotation: '12h',
            am_pm: true,
            utc: true,
            utc_offset: <%SETTING_TIMEOFFSET%>,
            fontFamily: 'Verdana, Times New Roman',
            fontSize: '11px',
            foreground: 'white',

            background: 'black'
          }
          $('.jclockPST').jclock(pstOptions);
        });

jQuery2

 /*
 * jQuery jclock - Clock plugin - v 0.2.1
 * http://plugins.jquery.com/project/jclock
 *
 * Copyright (c) 2007-2008 Doug Sparling <http://www.dougsparling.com>
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 */
(function($) {

  $.fn.jclock = function(options) {
    var version = '0.2.1';

    // options
    var opts = $.extend({}, $.fn.jclock.defaults, options);

    return this.each(function() {
      $this = $(this);
      $this.timerID = null;
      $this.running = false;

      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

      $this.timeNotation = o.timeNotation;
      $this.am_pm = o.am_pm;
      $this.utc = o.utc;
      $this.utc_offset = o.utc_offset;

      $this.css({
        fontFamily: o.fontFamily,
        fontSize: o.fontSize,
        backgroundColor: o.background,
        color: o.foreground
      });

      $.fn.jclock.startClock($this);

    });
  };

  $.fn.jclock.startClock = function(el) {
    $.fn.jclock.stopClock(el);
    $.fn.jclock.displayTime(el);
  }
  $.fn.jclock.stopClock = function(el) {
    if(el.running) {
      clearTimeout(el.timerID);
    }
    el.running = false;
  }
  $.fn.jclock.displayTime = function(el) {
    var time = $.fn.jclock.getTime(el);
    el.html(time);
    el.timerID = setTimeout(function(){$.fn.jclock.displayTime(el)},1000);
  }
  $.fn.jclock.getTime = function(el) {
    var now = new Date();
    var hours, minutes, seconds;

    if(el.utc == true) {
      if(el.utc_offset != 0) {
        now.setUTCHours(now.getUTCHours()+el.utc_offset);
      }
      hours = now.getUTCHours();
      minutes = now.getUTCMinutes();
      seconds = now.getUTCSeconds();
    } else {
      hours = now.getHours();
      minutes = now.getMinutes();
      seconds = now.getSeconds();
    }

    var am_pm_text = '';
    (hours >= 12) ? am_pm_text = " P.M." : am_pm_text = " A.M.";

    if (el.timeNotation == '12h') {
      hours = ((hours > 12) ? hours - 12 : hours);
    } else {
      hours   = ((hours <  10) ? "0" : "") + hours;
    }

    minutes = ((minutes <  10) ? "0" : "") + minutes;
    seconds = ((seconds <  10) ? "0" : "") + seconds;

    var timeNow = hours + ":" + minutes + ":" + seconds;
    if ( (el.timeNotation == '12h') && (el.am_pm == true) ) {
     timeNow += am_pm_text;
    }

    return timeNow;
  };

  // plugin defaults
  $.fn.jclock.defaults = {
    timeNotation: '24h',
    am_pm: false,
    utc: false,
    fontFamily: '',
    fontSize: '',
    foreground: '',
    background: '',
    utc_offset: 0
  };

})(jQuery);

So where do you make a call to your server to get your server's time? How is the client supposed to know the server's time? — crush, May 28 '13 at 13:22
I'm displaying this clock on my website, so when someone browse it .. it should grab the time on the machine where the website is hosted and NOT the time from user that is browsing it. — nLal, May 28 '13 at 13:24
Then you need to call a script on your server that sends the time back to the client. I think the problem here is that you have no concept of server and client. — crush, May 28 '13 at 13:25
Alright. I've got another idea ... how to make it so that the time offset will work correctly instead of getting the time from server side machine ? Now when I set time offeset to +3 for example it displays the time from the user that is browsing thr website. so there still must be a way to display the clock for time zone +3 gmt for example — nLal, May 28 '13 at 13:39

crush · Accepted Answer · 2013-05-28T15:24:53.777

1

Your script never contacts your server at any time. You are going to need a server side script that outputs the time.

Create a PHP file named GetTime.php and place it on your server. It should have the following contents:

PHP

<?php
echo time();

Next, you need to modify your script to get the time from your server script.

You don't want to continuously do this because it could cause delays in updating your clock. So, do it on clock initialization, and store an offset between the server and the client. Then apply that offset each time the client date is retrieved in the getTime() function.

jQuery

 /*
 * jQuery jclock - Clock plugin - v 0.2.1
 * http://plugins.jquery.com/project/jclock
 *
 * Copyright (c) 2007-2008 Doug Sparling <http://www.dougsparling.com>
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 */
(function($) {

  $.fn.jclock = function(options) {
    var version = '0.2.1';

    // options
    var opts = $.extend({}, $.fn.jclock.defaults, options);

    return this.each(function() {
      $this = $(this);
      $this.timerID = null;
      $this.running = false;

      $.fn.jclock.getServerOffset($this);

      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

      $this.timeNotation = o.timeNotation;
      $this.am_pm = o.am_pm;
      $this.utc = o.utc;
      $this.utc_offset = o.utc_offset;

      $this.css({
        fontFamily: o.fontFamily,
        fontSize: o.fontSize,
        backgroundColor: o.background,
        color: o.foreground
      });

      $.fn.jclock.startClock($this);

    });
  };

  $.fn.jclock.getServerOffset = function(el) {
    //Want to make a synchronous call to the server to get the server time.
    $.ajax({
        url: "GetTime.php",
        async: false,
        context: el,
        success: function(result) {
            var serverDate = new Date(+(result) * 1000); //Convert the seconds to a number, and multiple by 1000 to get milliseconds.
            var clientDate = new Date();

            $this.serverOffset = clientDate - serverDate; //Set the offset between server and client.
        }
    });
  };

  $.fn.jclock.startClock = function(el) {
    $.fn.jclock.stopClock(el);
    $.fn.jclock.displayTime(el);
  };

  $.fn.jclock.stopClock = function(el) {
    if(el.running) {
      clearTimeout(el.timerID);
    }
    el.running = false;
  };

  $.fn.jclock.displayTime = function(el) {
    var time = $.fn.jclock.getTime(el);
    el.html(time);
    el.timerID = setTimeout(function(){$.fn.jclock.displayTime(el)},1000);
  };

  $.fn.jclock.getTime = function(el) {
    var now = new Date(new Date().getTime() - el.serverOffset); //Apply the server offset.
    var hours, minutes, seconds;

    if(el.utc == true) {
      if(el.utc_offset != 0) {
        now.setUTCHours(now.getUTCHours()+el.utc_offset);
      }
      hours = now.getUTCHours();
      minutes = now.getUTCMinutes();
      seconds = now.getUTCSeconds();
    } else {
      hours = now.getHours();
      minutes = now.getMinutes();
      seconds = now.getSeconds();
    }

    var am_pm_text = '';
    (hours >= 12) ? am_pm_text = " P.M." : am_pm_text = " A.M.";

    if (el.timeNotation == '12h') {
      hours = ((hours > 12) ? hours - 12 : hours);
    } else {
      hours   = ((hours <  10) ? "0" : "") + hours;
    }

    minutes = ((minutes <  10) ? "0" : "") + minutes;
    seconds = ((seconds <  10) ? "0" : "") + seconds;

    var timeNow = hours + ":" + minutes + ":" + seconds;
    if ( (el.timeNotation == '12h') && (el.am_pm == true) ) {
     timeNow += am_pm_text;
    }

    return timeNow;
  };

  // plugin defaults
  $.fn.jclock.defaults = {
    timeNotation: '24h',
    am_pm: false,
    utc: false,
    fontFamily: '',
    fontSize: '',
    foreground: '',
    background: '',
    utc_offset: 0
  };

})(jQuery);

edited May 28 '13 at 15:24

answered May 28 '13 at 13:49

crush

16,713
9
59
100

Got it fixed but just the last issue is that the jquery doesnt want to display the clock after I've overwritten the file with your jquery script above. – nLal May 28 '13 at 14:31
I only overwritten the file with your script above and created the gettime.php which works and provides the required time from server. Just it doesnt want to show it on website .. dont know why. UPDATE: Oh, okay. thanks a lot. – nLal May 28 '13 at 14:39
I still cant display it. UPDATE: Oh, you never edited the jquery function. Only the php echo time one. Let me know once it's fixed, so I can try. Much appreciated, Crush. – nLal May 28 '13 at 14:51
@nLal Should be fixed now. – crush May 28 '13 at 14:59
@nLal What version of jQuery are you using? – crush May 28 '13 at 15:07
I believe it's jQuery 1.2.2 Also, it's not from the version. It worked before but since we've edited it shows this. – nLal May 28 '13 at 15:09
@nLal also, please check that your php script is returning a number. – crush May 28 '13 at 15:09
@nLal that's really old version...can you try a newer version of jQuery? – crush May 28 '13 at 15:10
Yes, it's returning a number. 1369753799 One more thing .. can I change the url in the jquery to a specific location like: hostname.com/gettime.php ? – nLal May 28 '13 at 15:10
@nLal yeah that's no problem. It seems there is an issue with the jQuery version you are using, and the fix I gave. Do you have the ability to use a newer version of jQuery? – crush May 28 '13 at 15:12
Yeah, I want to use the older version for my other stuff. Is there a way to use the newer version for this clock jquery only ? – nLal May 28 '13 at 15:13
@nLal Okay, try that. Works for 1.2.3 (oldest version I could find). – crush May 28 '13 at 15:14
Finally it works. It's much appreciated. Will mark as accepted this answer. I really appreciate your help. Just can you answer me to make sure that there aren't any security wholes in the script right? – nLal May 28 '13 at 15:23
Absolutely no security holes. Also, one last edit that seems to work in newer versions as well as the old versions (give it a try please). – crush May 28 '13 at 15:24
even gettime.php can be left like that somewhere in my root folder ? – nLal May 28 '13 at 15:25
Yeah, because all it does is output the server time. There is no entry point for an attacker to abuse it as it accepts to input. – crush May 28 '13 at 15:25
I've accepted the question. I'm sorry that I cant vote up the answer or any of your comments but it says that I need at least 15 reputation. I really appreciate your help once again, Crush. Thank you. – nLal May 28 '13 at 15:26
Also, won't this overload the website since gettime.php is requested in every page load or I'm wrong and it wont cause troubles ? – nLal May 28 '13 at 18:05
@nLal if calling GetTime.php everytime the page is loaded overloads your web server, you have serious issues. No, it shouldn't overload the web server... – crush May 29 '13 at 12:12

score 0 · Answer 2 · answered May 28 '13 at 13:21

0

var now = new Date(); creates a date timestamp based on the client's system. I guess this gets called client side?

answered May 28 '13 at 13:21

Alex

9,911
5
33
52

Yep. He'll need to make some type of AJAX call to the server to get the servers time in milliseconds, then feed that to `var now = new Date(milliseconds);` – crush May 28 '13 at 13:21
So, how I should change this line `var now = new Date();` ? – nLal May 28 '13 at 13:22
Please note that the server time may not be exact due to the HTTP request. – Yassir Ennazk May 28 '13 at 13:25
Yeah, a few seconds more or less aren't a problem. I just dont know how exactly to edit my current script, so It will grab the server time .. will be much appreciated if someone can help me out and upload the edited script on pastebin.com – nLal May 28 '13 at 13:27
write a php script with $time = time(); and an jQuery ajax function which gets the value. var now = $.ajax({ settings }); maybe this helps you http://stackoverflow.com/questions/6804327/jquery-ajax-call-from-javascript-to-php – Alex May 28 '13 at 13:29
@Alex `echo $time;` you mean. – crush May 28 '13 at 13:31
@crush how the php value is output is another question, i just wanted to make sure to use time() (in my example I am just saving the stamp in the variable $time, not printing or echoing at all ;) ) – Alex May 28 '13 at 13:34
Alright. I've got another idea ... how to make it so that the time offset will work correctly instead of getting the time from server side machine ? Now when I set time offeset to +3 for example it displays the time from the user that is browsing thr website. so there still must be a way to display the clock for time zone +3 gmt for example – nLal May 28 '13 at 13:39

score 0 · Answer 3 · answered May 28 '13 at 13:23

0

jQuery runs clientside (on the PC you use to browse to the website) and therefore it will use the client's time. If you want to use the time of the server you need to modified your script and pass the current server time to your script (and use this time instead of new Date()).

answered May 28 '13 at 13:23

Tom Drissen

323
2
9

I've got it but I'm really unsure how exactly to do it, so I won't mess up something. So which lines in my script I should change or if it's possible to change them and upload on pastebin.com Will be really grateful. – nLal May 28 '13 at 13:26

Why this jQuery clock doesn't work properly to display the server-side time?

3 Answers3