Я немного играю с push-уведомлениями и хочу обновлять страницу всякий раз, когда в базе данных происходят изменения.
У меня это из http://www.screenr.com/SNH :
<?php $filename = dirname(__FILE__).'/data.php'; $lastmodif = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0; $currentmodif = filemtime($filename); while ($currentmodif <= $lastmodif) { usleep(10000); clearstatcache(); $currentmodif = filemtime($filename); } $response = array(); $response['msg'] = file_get_contents($filename); $response['timestamp'] = $currentmodif; echo json_encode($response); ?> My data.php – это скрипт, получающий данные из файла JSON:
<script>function itnews_overview() { $.getJSON('/ajax.php?type=itnews_overview', function(data) { $.each(data.data, function(option, type) { $('.bjqs').append('<li><span class="date">'+ type.submitted +'<br />'+ type.time +'</span><h2>' + type.title + '</h2><p>' + type.content + '</p></li>'); }); }); } </script> <script> itnews_overview(); </script> <div id="news"> <ul class="bjqs"></ul> </div>
UPDATE: Код из index.php:
<script type="text/javascript"> var timestamp = null; function waitForMsg() { $.ajax({ type: "GET", url: "getData.php?timestamp=" + timestamp, async: true, cache: false, success: function(data) { var json = eval('(' + data + ')'); if(json['msg'] != "") { $(".news").html(json['msg']); } timestamp = json['timestamp']; setTimeout('waitForMsg()',1000); }, error: function(XMLHttpRequest, textStatus, errorThrown){ setTimeout('waitForMsg()',15000); } }); } $(document).ready(function(){ waitForMsg(); }); </script>
Поскольку этот файл не сохраняется, когда я добавляю что-то в базу данных, filemtime не будет работать – есть ли другой способ проверить, добавлены ли новые строки в таблицу?
UPDATE: попытка решить эту проблему с помощью SSE. У меня есть два файла: index.php и send_sse.php (вдохновение из http://www.developerdrive.com/2012/03/pushing-updates-to-the-web-page-with-html5-server-sent-events / )
index.php:
<div id="serverData">Content</div> <script type="text/javascript"> //check for browser support if(typeof(EventSource)!=="undefined") { //create an object, passing it the name and location of the server side script var eSource = new EventSource("send_sse.php"); //detect message receipt eSource.onmessage = function(event) { //write the received data to the page document.getElementById("serverData").innerHTML = event.data; }; } else { document.getElementById("serverData").innerHTML="Whoops! Your browser doesn't receive server-sent events."; } </script>
send_sse.php:
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $url = "content.json"; $str = file_get_contents($url); $data = json_decode($str, TRUE); //generate random number for demonstration //echo the new number echo "data: " . json_encode($data); ob_flush(); ?>
Это, однако, похоже, не работает, что, вероятно, связано с тем, что SSE нужны простые текстовые данные. Я просто не могу понять, как это сделать, а затем обернуть это содержимое в пару тегов HTML.
UPDATE: Хорошо, теперь это похоже на работу с SSE, благодаря VDP. У меня есть следующее:
$sql= "SELECT title, content, submitted FROM `flex_itnews` where valid = 1 order by submitted desc"; $query= mysql_query($sql); setlocale(LC_ALL, 'da_DK'); while($result = mysql_fetch_array($query)){ echo "data: <li><span class='date'>". strftime('%e. %B', strtotime($result['submitted'])) ."<br />kl. ". strftime('%H.%M', strtotime($result['submitted'])) ."</span><h2>" . $result['title']. "</h2><p>" . $result['content'] ."</p></li>\n"; }
Однако, когда я добавляю что-то новое, он просто перекликается с data: data: data . Если я обновляю страницу, она отображается правильно.
UPDATE: использование плагина livequery:
<script> var source = new EventSource('data2.php'); source.onmessage = function (event) { $('.bjqs').html(event.data); }; $('#news').livequery(function(){ $(this).bjqs({ 'animation' : 'slide', 'showMarkers' : false, 'showControls' : false, 'rotationSpeed': 100, 'width' : 1800, 'height' : 160 }); }); </script>
UPDATE: попытка использования делегата ()
<script> $("body").delegate(".news", "click", function(){ $("#news").bjqs({ 'animation' : 'slide', 'showMarkers' : false, 'showControls' : false, 'rotationSpeed': 100, 'width' : 1800, 'height' : 160 }); var source = new EventSource('data2.php'); source.onmessage = function (event) { $('.bjqs').append(event.data); }; }); </script>