2015-07-23 1 views
0

У меня есть одно окно с панелью администратора, где я могу настроить время паузы или остановить обратный отсчет, а другое окно, в котором пользователь видит один и тот же таймер. Когда я нажимаю из панели администратора на время паузы или настраиваю время + - я хочу, чтобы пользователь увидел время, приостановленное или скорректированное. Как я могу это сделать? я пробовал с iframe, но он не меняется, я могу попробовать автозагрузку каждые 1 сек, но я не думаю, что это хорошо. Поэтому я хочу манипулировать временем из окна и показать это время в другом окне. Может кто-то помочь мне с этим?Обновление таймера обратного отсчета в другом окне, когда я нажимаю паузу в главном окне

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> 

админ окно/вкладку enter image description here

, что пользователь видит в другом Wi ndow/вкладка enter image description here

@Abraar Arique вот мой код, который задерживается на 2-3 секунды

<?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(); 
?> 
+0

Что значит «другое окно»? другую вкладку/окно браузера или панель пыльника на вашей стороне? –

+0

еще одна вкладка/окно – chris227

ответ

0

Ваша попытка создать веб-приложение в режиме реального времени. В этих ситуациях заставить клиента искать информацию об изменении каждые 1 секунду или около того очень неэффективно. Чаще всего сервер информирует клиента об изменениях, поэтому клиент может обновить страницу соответствующим образом. Этот метод называется События, отправленные сервером (SSE). Здесь клиентский разъем всегда остается открытым и может передавать данные взад и вперед. Это лучше всего описано с помощью веб-приложения для общения в чате, такого как Facebook. На Facebook, когда пользователь входит в сокет, создается. Если кто-то отправляет вам сообщение, то серверный скрипт отправляет клиенту сообщение , и клиент показывает вам сообщение.

Использование таких событий, связанных с сервером, требует знания знакового языка сценариев на стороне сервера: PHP, Ruby, Python, Node.js, ASP.NET Есть много на выбор. Вам также необходимо использовать соответствующий сокет, например, Websockets.

Вам необходимо создать серверный скрипт, который прослушивает изменения таймера и отправляет эту информацию в браузер (клиент). Затем вы можете использовать JavaScript для обновления информации всякий раз, когда получено сообщение сценария на стороне сервера. Возможно, вам также понадобится спроектировать и реализовать какую-либо базу данных, если вы хотите сохранить данные.

Один очень простой пример сервер посланных событий: http://www.w3schools.com/html/html5_serversentevents.asp

Надежда, которая отвечает на ваш вопрос.

+0

Thnx i реализована с 'SSE', так как это проще, чем' websockets' и работает. есть как 3-секундная задержка, я могу это устранить? – chris227

+0

@ chris227 Трудно сказать, не глядя на код. Если вы разместите свой текущий код, я смогу обнаружить проблему. Но в целом SSE - это быстрое решение в реальном времени. –

2

Вы должны хранить информацию таймера (активный, помолчал, конец) где-то на сервере, например базы данных. Затем прочитайте его, когда сторона загрузится и создайте с ним таймер. Кажется, вы также хотите обновить все активные сеансы. Для этого вам нужно использовать websockets или longpolling для трансляции всех сеансов, когда администратор изменяет таймер. Посмотрите на http://signalr.net/ для веб-приложений реального времени.