Not hard, various techniques available. Simple clustering on distributed locks, simple javascript over browser that works on clock timing(required these PC to have their clocks synchronised via NTP first). The communication between the applications running one each PC can be communicated with various possible approach from clustering to simple tcp/udp/ip packets, or high level WebRTC(currently only in chrome and firefox), HTTP, web sockets, XML over any transport, you name it. It's just how simple and/or complicated you want things to be
For javascript approach, combine this 2
JavaScript jQuery countup or countdown clock timer |
Getting Started with WebRTC - HTML5 Rocks
You want something more classic, have a web server, design one controller HTML that update a shared resource in the web server. The rest of the browser load receiver HTML that read the state from this shared resource via ajax working in polling mode and start its count down.
Really helpful and detailed.Thanks! But is there any ready-made software? Cause i not familiar with Java and html coding.
<html>
<head>
<style>
div.timer {
border:1px #666666 solid;
width:190px;
height:50px;
line-height:50px;
font-size:36px;
font-family:"Courier New", Courier, monospace;
text-align:center;
margin:5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://webrtc-experiment.appspot.com/DataChannel.js"></script>
<script type="text/javascript">
// example use
var timer;
var channel = null;
var channelready = false;
// Timer library 1.0
function _timer(callback)
{
var time = 0; // The default time of the timer
var mode = 1; // Mode: count up or count down
var status = 0; // Status: timer is running or stoped
var timer_id; // This is used by setInterval function
// this will start the timer ex. start the timer with 1 second interval timer.start(1000)
this.start = function(interval)
{
interval = (typeof(interval) !== 'undefined') ? interval : 1000;
if(status == 0)
{
status = 1;
timer_id = setInterval(function()
{
switch(mode)
{
default:
if(time)
{
time--;
generateTime();
if(typeof(callback) === 'function') callback(time);
}
break;
case 1:
if(time < 86400)
{
time++;
generateTime();
if(typeof(callback) === 'function') callback(time);
}
break;
}
}, interval);
}
}
// Same as the name, this will stop or pause the timer ex. timer.stop()
this.stop = function()
{
if(status == 1)
{
status = 0;
clearInterval(timer_id);
}
}
// Reset the timer to zero or reset it to your own custom time ex. reset to zero second timer.reset(0)
this.reset = function(sec)
{
sec = (typeof(sec) !== 'undefined') ? sec : 0;
time = sec;
generateTime(time);
}
// Change the mode of the timer, count-up (1) or countdown (0)
this.mode = function(tmode)
{
mode = tmode;
}
// This methode return the current value of the timer
this.getTime = function()
{
return time;
}
// This methode return the current mode of the timer count-up (1) or countdown (0)
this.getMode = function()
{
return mode;
}
// This methode return the status of the timer running (1) or stoped (1)
this.getStatus
{
return status;
}
// This methode will render the time variable to hour:minute:second format
function generateTime()
{
var second = time % 60;
var minute = Math.floor(time / 60) % 60;
var hour = Math.floor(time / 3600) % 60;
second = (second < 10) ? '0'+second : second;
minute = (minute < 10) ? '0'+minute : minute;
hour = (hour < 10) ? '0'+hour : hour;
$('div.timer span.second').html(second);
$('div.timer span.minute').html(minute);
$('div.timer span.hour').html(hour);
if (channelready)
channel.send("[" + hour + "," + minute + "," + second + "]");
}
}
$(document).ready(function(e)
{
channel = new DataChannel('channel-name');
channel.direction = 'one-to-many';
channel.onopen = function(userid) {
console.debug("ONOPEN - " + userid);
channelready = true;
}
channel.onleave = function(userid) {
console.debug("ONLEAVE - " + userid);
};
channel.onerror = function(event) {
console.debug("ONERROR - " + event);
}
channel.onclose = function(event) {
console.debug("ONCLOSE - " + event);
channel = new DataChannel('channel-name');
}
timer = new _timer
(
function(time)
{
if(time == 0)
{
timer.stop();
alert('time out');
}
}
);
timer.reset(60);
timer.mode(0);
});
</script>
</head>
<body>
<div class="timer">
<span class="hour">00</span>:<span class="minute">00</span>:<span class="second">00</span>
</div>
<div class="control">
<button onClick="timer.start(1000)">Start</button>
<button onClick="timer.stop()">Stop</button>
<button onClick="timer.reset(60)">Reset</button>
<button onClick="timer.mode(1)">Count up</button>
<button onClick="timer.mode(0)">Count down</button>
</div>
</body>
</html><html>
<head>
<style>
div.timer {
border:1px #666666 solid;
width:190px;
height:50px;
line-height:50px;
font-size:36px;
font-family:"Courier New", Courier, monospace;
text-align:center;
margin:5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://webrtc-experiment.appspot.com/DataChannel.js"></script>
<script type="text/javascript">
var channel = new DataChannel('channel-name');
channel.onopen = function(userid) {
console.debug("ONOPEN - " + userid);
}
channel.onleave = function(userid) {
console.debug("ONLEAVE - " + userid);
};
channel.onerror = function(event) {
console.debug("ONERROR - " + event);
}
channel.onclose = function(event) {
console.debug("ONCLOSE - " + event);
}
channel.onmessage = function(message, userid) {
var arr = eval(message);
console.debug(arr);
var second = (arr[2] < 10) ? '0'+arr[2] : arr[2];
var minute = (arr[1] < 10) ? '0'+arr[1] : arr[1];
var hour = (arr[0] < 10) ? '0'+arr[0] : arr[0];
$('div.timer span.second').html(second);
$('div.timer span.minute').html(minute);
$('div.timer span.hour').html(hour);
}
</script>
</head>
<body>
<div class="timer">
<span class="hour">00</span>:<span class="minute">00</span>:<span class="second">00</span>
</div>
</body>
</html>