Search code examples
javascriptjqueryhtmlcountdown

Countdown timer update on other window when i press pause on main window

I have one window with an admin pannel where i can adjust time pause or stop countdown and another window that user is seeing the same timer. When i press from the admin pannel on pause time or adjust time +- i want user to see the time paused or adjusted. How can i make that? i tryed with an iframe but it doesnt change, i could try an autoreload at every 1 sec but i don't think that's good. So what i want is to manipulate time from a window and show that time on the other window. Can someone help me with this?

html

<div id="defaultCountdown"></div>
<button type="button" id="pauseButton">Pause</button>
<button type="button" id="toggleButton">Toggle</button>

js

<script>
$(function () {
    var austDay = new Date();
    austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
    $('#defaultCountdown').countdown({until: austDay});
    $('#year').text(austDay.getFullYear());
    $('#defaultCountdown').countdown({until: austDay, onTick: showPauseTime}); 

$('#pauseButton').click(function() { 
    var pause = $(this).text() === 'Pause'; 
    $(this).text(pause ? 'Resume' : 'Pause'); 
    $('#defaultCountdown').countdown(pause ? 'pause' : 'resume'); 
}); 

$('#toggleButton').click(function() { 
    $('#defaultCountdown').countdown('toggle'); 
}); 

function showPauseTime(periods) { 
    $('#showPauseTime').text(periods[4] + ':' + twoDigits(periods[5]) + 
        ':' + twoDigits(periods[6])); 
}
});
</script>

admin window/tab enter image description here

what user is seeing in another window/tab enter image description here

@Abraar Arique here is my code that is delayed 2-3 seconds 

<?php 
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
include_once('db.php');
$stmt=$dbh->prepare("Select * FROM Mesaje where Game=0 order by ID_Mesaj desc limit 1");
$stmt->execute();
if ($row=$stmt->fetch())
{   
$id_indiciu=$row['ID_Indiciu'];
    if ($row['ID_Indiciu']!=0)
    {
        $stmtt=$dbh->prepare("Select * FROM Indiciu where  ID_Indiciu=$id_indiciu");
        $stmtt->execute();
        if ($rowz=$stmtt->fetch())
            {   
        echo "data: ".$rowz['Indiciu']."\n\n "; 
            }
    }
    else
    {
    echo "data: ".$row['Mesaj']."\n\n "; 
    }
}
ob_flush();
flush();
?>
Solution

  • Your trying to create a real time Web app. For these situations, making the client looking for information change every 1 second or so is very inefficient. It's more common to make the server inform the client about the changes so the client can update the page accordingly. This technique is called Server-sent Events (SSE). Here, a client-sever socket always stays open and it can transmit data back and forth. This is best described using a chatting Web app like Facebook. On Facebook when a user logs in a socket is created. If anybody sends you a message then a server-side script sends a message event to the client and the client shows you the message.

    Using Server-sent events like this requires working knowledge of a server-side scripting language: PHP, Ruby, Python, Node.js, ASP.NET there are many to choose from. You also need to use the appropriate socket, Websockets for example.

    You need to create a server-side script that listens for timer changes and sends that information to the browser (client). Then you can use JavaScript to update the information whenever the server-side script message is received. You may also need to design and implement a database of some kind if you want to save the data.

    One very simple example of server-sent events: http://www.w3schools.com/html/html5_serversentevents.asp

    Hope that answers your question.