Javascript and PHP countdown Timer that displays the same for everyone

Question

I have the script needed to generate a countdown timer that has a start and resume button. What I'm attempting to do is to have Start, stop, and reset buttons on one page that controls the timer on the other page. So if user X visits page.html they will see a timer that is at 0. Admin X visits admin.html where they see the timer at 0 but they also have a start, stop, and reset buttons. When the Admin clicks a button, the timer on page.html starts to countdown. If another user visits the page while the timer is counting down, they will see where the timer currently is at. If anyone has any code ideas, other answers on this site I can reference, or the code that I would need, I would be very thankful.

---The real scenario We have people on skype that are doing a show and they need to know when it's time to take a break. The idea is that the producer can hit a button that starts a countdown timer to let them know they have 60 seconds till a break. The reason I want this on a web page is because there are other things going on in the page that the person on skype is paying attention to. So I wanted something that they can't miss. I have access to an sql server, and can do both php and javascript. I'm guessing I will need to do some kind of combination of the two.

UPDATE Thanks everyone for your help.

I'm updating this because I've realized that I'm probably making things more complicated than they need to be at this point. There is a break every 30 min and all shows will either start at the top of an hour or at 30min past. I finally figured out the perfect script. Although it may be slightly off because of normal clock drift, it should actually display the same no matter who enters the page.

<script>
 function addZero(i)
{
if (i<10)
  {
   i="0" + i;
  }
 return i;
 }
 setInterval(function() {
   function addZero(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
    var d = new Date();
    var s =(d.getSeconds());
    var m =(d.getMinutes());
    var x = document.getElementById("timer");
    var c = addZero(30 - m) + ":" + addZero(60 - s);
    var d = addZero(60 - m) + ":" + addZero(60 - s);
    if (m < 30) {
        t = c
    }
    else {
        t = d
    }

     x.innerHTML = t;
 }, 250) 
    </script>    
 <div align="center">
    <table><tbody>
    <tr><td style="font-size:34px;" id="timer"></td>
    <td nowrap="nowrap" width="15px"><p style="text-align: left;"></p></td>
    <td style="font-size:24px;">Minutes till Station Break.</td></tr>
     </tbody></table>
          </div>

Answer 1

Sounds like you'll need a COMET/Push solution that will allow you to monitor the active clients and push new data to them. I'm not sure that PHP is the best solution for this as there are other programming languages that handle this more elegantly.

See: Using comet with PHP?

Others may disagree, but Node.js is an excellent up and coming solution to this particular type of problem. Combine Node.js with Socket.io and you have the basic tools to implement exactly what you're describing.

In a nutshell, a client application will send an AJAX request to a server. The server will then hold the request until it has something to return (in your case - timer started, timer ticked, timer paused, etc.). As soon as data is returned, another request will be made and held by the server thus repeating the process. If your server & client support WebSockets, then held AJAX connections can be avoided in favor of a WebSocket (TCP over HTTP) connection.

Because not everyone is using the latest version of Chrome/Firefox, you'll probably have to support multiple push methods to be cross browser compatible. Socket.io abstracts the communication layer (Comet - long polling, WebSockets, Adobe Flash Socket, Ajax multipart streaming, Forever Iframe, JSONP Polling) and chooses the best technology based on client's browser capabilities.

Alternative

You could also use a javascript interval to periodically poll the server (via AJAX) to see if the timer has been set. However, you may swamp your server with requests since each client will be constantly polling the server to determine if the 60 second timer has started.

Answer 2

I have finally come up with a solution that works. There are still elements I haven't quite figured out how to fix, but the following code essentially does exactly what I need for now.

setInterval(function() {
function addZero(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
var x = document.getElementById("timer");
var d = new Date();
var s = (d.getSeconds());
var m = (d.getMinutes());
var a = addZero(30 - m);
var b = addZero(60 - m);
var c = (60 - s);
var z = "<span style='color:red;font-size:50px;'>" + "Break" + "</span>";
var v = "<span style='color:black;font-size:24px;'>" + "Break" + "</span>";

if (m > 30) {
    y = b;
}
else if (m < 30) {
    y = a;
}
if (y < 2 && c < 15) {
    q = z;
}
else {
    q = v;
}

var t = y + (":" + addZero(c) + " Till Station " + (q));
x.innerHTML = t;
}, 250);



<div align="center" id="timer" style='color:black;font-size:24px;' ></div>