Cuenta regresiva con hora del servidor

[sebaocano]

Hola, mi problema es el siguiete: tengo una web donde hay cuenta regresiva de productos. El problema es que el tiempo restante depende del la hora del cliente ya que se hace en javascript.

La solucion seria poner el javascript con la hora del servidor por medio de php o de alguna otra forma. aca dejo el script usado:

intente cambiar la parte donde obtiene la hora actual, pero sin exito.
Especificamente esta linea: currentDate = Math.floor($.now() / 1000);


<script>
(function($) {
$.fn.countdown = function(options, callback) {

//custom 'this' selector
thisEl = $(this);

//array of custom settings
var settings = {
'date': null,
'date2': null,
'format': null
};

//append the settings array to options
if(options) {
$.extend(settings, options);
}

//main countdown function
function countdown_proc() {

eventDate = Date.parse(settings['date']) / 1000;

currentDate = Math.floor($.now() / 1000);


if(eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}

seconds = eventDate - currentDate;

days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed

hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed

minutes = Math.floor(seconds / 60);
seconds -= minutes * 60; //update the seconds variable with no. of minutes removed

//conditional Ss
if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }

//logic for the two_digits ON setting
if(settings['format'] == "on") {
days = (String(days).length >= 2) ? days : "0" + days;
hours = (String(hours).length >= 2) ? hours : "0" + hours;
minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
}

//update the countdown's html values.
if(!isNaN(eventDate)) {
thisEl.find(".days").text(days);
thisEl.find(".hours").text(hours);
thisEl.find(".minutes").text(minutes);
thisEl.find(".seconds").text(seconds);
} else {
alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
clearInterval(interval);
}
}

//run the function
countdown_proc();

//loop the function
interval = setInterval(countdown_proc, 1000);

}
}) (jQuery);
</script>
<script>


$("#countdown").countdown({
//date: "17 august 2013 12:00:00",

date: "<?php echo date("d F Y",strtotime($fecha_finaliza)); ?> <?php echo $reg["hora_finaliza"] ?> ",
format: "on"
},

function() {
// callback function

});




</script>

saludos y gracias por tomarse su tiempo!

[maycolalvarez]

por favor utilice el highlight para mostrar código.

Ten en cuenta que el verdadero problema es el polling que genera estar consultando (enviando peticiones http) al servidor, eso puede suturarlo cuando se incremente la cantidad de usuarios, causándote un enorme cuello de botella.

la solución es tratar de crear una conexión persistente con el servidor, lo cual no es nada simple, tienes opciones como HTML5 WebSockets pero depende de ambas partes el poder implementarlo (navegador/servidor), SSE (no funciona en IE), entre otras.

No te recomiendo Ajax Longpolling, porque no te va a servir si quieres la hora en tiempo real, la alternativa más viable es sincronizar cada cierto tiempo con el servidor y llevar la cuenta localmente en JS, y que en determinada acción, como click en compra del producto actualice el contador, validando desde el lado del servidor.

[marlanga]

Código Javascript:

(function($) {
                $.fn.countdown = function(options, callback) {
                    
                    //custom 'this' selector
                    thisEl = $(this);
                    
                    var last=$.now();
                    var acumulated=0;
                    
                    //array of custom settings
                    var settings = { 
                        'date': null,
                        'date2': null,
                        'format': null
                    };
                    
                    //append the settings array to options
                    if(options) {
                        $.extend(settings, options);
                    }
                    
                    //main countdown function
                    function countdown_proc() {
                        
                        eventDate = Date.parse(settings['date']);
                        
                        if (settings['date2'])
                        {
                            acumulated+= $.now() - last;
                            currentDate = Date.parse(settings['date2'])+acumulated;
                            last=$.now();
                        }
                        else
                        {
                            currentDate = Math.floor($.now());
                        }
                        
                        
                        if(eventDate <= currentDate) {
                            callback.call(this);
                            clearInterval(interval);
                        }
                        
                        seconds = Math.floor((eventDate - currentDate)/1000);
                        
                        days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
                        seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed
                        
                        hours = Math.floor(seconds / (60 * 60));
                        seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed
                        
                        minutes = Math.floor(seconds / 60);
                        seconds -= minutes * 60; //update the seconds variable with no. of minutes removed
                        
                        //conditional Ss
                        if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
                        if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
                        if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
                        if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }
                        
                        //logic for the two_digits ON setting
                        if(settings['format'] == "on") {
                            days = (String(days).length >= 2) ? days : "0" + days;
                            hours = (String(hours).length >= 2) ? hours : "0" + hours;
                            minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
                            seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
                        }
                        
                        //update the countdown's html values.
                        if(!isNaN(eventDate) || !isNaN(currentDate)) {
                            thisEl.find(".days").text(days);
                            thisEl.find(".hours").text(hours);
                            thisEl.find(".minutes").text(minutes);
                            thisEl.find(".seconds").text(seconds);
                        } else { 
                            alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
                            clearInterval(interval); 
                        }
                    }
                    
                    //run the function
                    countdown_proc();
                    
                    //loop the function
                    interval = setInterval(countdown_proc, 1000);
                    
                }
            }) (jQuery);
            $(function(){
            
                $("#countdown").countdown({
                //date: "17 august 2013 13:00:00",
                //date2: "17 august 2013 12:00:00",
                date: "<?php echo date("d F Y",strtotime($fecha_finaliza)); ?> <?php echo $reg["hora_finaliza"] ?> ",
                date2: "<?php echo date("d F Y",strtotime($fecha_actual)); ?> <?php echo $reg["hora_actual"] ?> ",
                format: "on"
                },
 
                function() {
                // callback function
 
                });
            });