voulez synchroniser un compte à rebours de javascript à l'heure du serveur, pas à l'heure du client

Question

Je veux que mon temps de compte à la fois pour chaque client (heure du serveur) et non pas le temps qu'ils ont sur leur ordinateur. C'est mon compte à rebours, comment je fais ça?

Ceci est le minuteur qui devrait compter jusqu'à une date pour tout le monde afin que tout le monde autour de la voit le minuteur tomber à 0 en même temps.

 <script type="text/javascript"> 
     var ringer = { 
      countdown_to: "07/20/2017 6:00 PM", 
      rings: { 
      'DAYS': { 
       s: 86400000, // mseconds in a day, 
       max: 365 
      }, 
      'HOURS': { 
       s: 3600000, // mseconds per hour, 
       max: 24 
      }, 
      'MINUTES': { 
       s: 60000, // mseconds per minute 
       max: 60 
      }, 
      'SECONDS': { 
       s: 1000, 
       max: 60 
      } 
      }, 
      r_count: 4, 
      r_spacing: 10, // px 
      r_size: 200, // px 
      r_thickness: 30, // px 
      update_interval: 11, // ms 


      init: function(){ 

      $r = ringer; 
      $r.cvs = document.createElement('canvas'); 

      $r.size = { 
       w: ($r.r_size + $r.r_thickness) * $r.r_count + ($r.r_spacing*($r.r_count-1)), 
       h: ($r.r_size + $r.r_thickness) 
      }; 



      $r.cvs.setAttribute('width',$r.size.w);   
      $r.cvs.setAttribute('height',$r.size.h); 
      $r.ctx = $r.cvs.getContext('2d'); 
      $(".countdownwrap").append($r.cvs); 
      $r.cvs = $($r.cvs);  
      $r.ctx.textAlign = 'center'; 
      $r.actual_size = $r.r_size + $r.r_thickness; 
      $r.countdown_to_time = new Date($r.countdown_to).getTime(); 
      $r.cvs.css({ maxWidth: $r.size.w+"px", maxHeight: $r.size.h+"px",width: "90%", height: "19%"}); 
      $r.go(); 
      }, 
      ctx: null, 
      go: function(){ 
      var idx=0; 

      $r.time = (new Date().getTime()) - $r.countdown_to_time; 


      for(var r_key in $r.rings) $r.unit(idx++,r_key,$r.rings[r_key]);  

      setTimeout($r.go,$r.update_interval); 
      }, 
      unit: function(idx,label,ring) { 
      var x,y, value, ring_secs = ring.s; 
      value = parseFloat($r.time/ring_secs); 
      $r.time-=Math.round(parseInt(value)) * ring_secs; 
      value = Math.abs(value); 

      x = ($r.r_size*.5 + $r.r_thickness*.5); 
      x +=+(idx*($r.r_size+$r.r_spacing+$r.r_thickness)); 
      y = $r.r_size*.5; 
      y += $r.r_thickness*.5; 


      // calculate arc end angle 
      var degrees = 360-(value/ring.max) * 360.0; 
      var endAngle = degrees * (Math.PI/180); 

      $r.ctx.save(); 

      $r.ctx.translate(x,y); 
      $r.ctx.clearRect($r.actual_size*-0.5,$r.actual_size*-0.5,$r.actual_size,$r.actual_size); 

      // first circle 
      $r.ctx.strokeStyle = "rgba(10,22,51, 1)"; 
      $r.ctx.beginPath(); 
      $r.ctx.arc(0,0,$r.r_size/2,0,2 * Math.PI, 2); 
      $r.ctx.lineWidth =$r.r_thickness; 
      $r.ctx.stroke(); 

      // second circle 
      $r.ctx.strokeStyle = "rgba(23,149,210,1)"; 
      $r.ctx.beginPath(); 
      $r.ctx.arc(0,0,$r.r_size/2,0,endAngle, 1); 
      $r.ctx.lineWidth =$r.r_thickness; 
      $r.ctx.stroke(); 

      // label 
      $r.ctx.fillStyle = "#fff"; 

      $r.ctx.font = '16px Helvetica'; 
      $r.ctx.fillText(label, 0, 40); 


      $r.ctx.font = 'bold 80px Helvetica'; 
      $r.ctx.fillText(Math.floor(value), 0, 18); 

      $r.ctx.restore(); 
      } 
     } 

     ringer.init(); 
    </script> 

Answer 1

var xmlHttp; 
    function srvTime(){ 
    try { 
     //FF, Opera, Safari, Chrome 
     xmlHttp = new XMLHttpRequest(); 
    } 
    catch (err1) { 
     //IE 
     try { 
      xmlHttp = new ActiveXObject('Msxml2.XMLHTTP'); 
     } 
     catch (err2) { 
      try { 
       xmlHttp = new ActiveXObject('Microsoft. 
      catch (eerr3) { 
       //AJAX not supported, use CPU time. 
       alert("AJAX not supported"); 
      } 
     } 
    } 
       xmlHttp.open('HEAD',window.location.href.toString(),false); 
xmlHttp.setRequestHeader("Content-Type", "text/html"); 
xmlHttp.send(''); 
return xmlHttp.getResponseHeader("Date"); 
} 

var st = srvTime(); 
var date = new Date(st); 

J'ai trouvé cette solution pour ce que vous voulez faire en utilisant Ajax

Answer 2

Quel système d'exploitation serveur et logiciel de serveur Web utilisez-vous? Au lieu d'initialiser l'heure en JavaScript, vous pouvez envoyer au client la page avec un temps initialisé qui est résolu au moment où l'utilisateur a demandé la page avec PHP, mais si vous voulez que le serveur compte pour vous, vous le feriez besoin d'écrire un XML HttpRequest pour continuer à demander l'heure actuelle sur un intervalle.

Answer 3

Vous allez vouloir convertir n'importe quel fuseau horaire que le serveur utilise (devrait utiliser UTC/GMT).

function convertUTCToLocal(dateFromServer) { 
    var now = new Date(); 
    return dateFromServer.setMinutes(dateFromServer.getMinutes - now.getTimezoneOffset()); 
}