Question

我正在制作一个在线jQuery幻灯片，以显示当地体育社区的最新分数。幻灯片是由Powerpoint演示文稿制作的图像，使用Windows程序Autover自动与Centos6服务器上的目录同步。

为了获得良好的用户体验，在更新图像时刷新页面会很好（或者显示一些文本，分数会更新并让用户刷新）。我可以设置元刷新，每10分钟刷新一次页面，但这不是一个理想的解决方案。

浏览其他主题我发现仅使用Javascript无法监控服务器目录。

我的想法是制作一个返回true（更改）或false（未更改）的php脚本，并使用javascript每隔5分钟从幻灯片显示网页调用此脚本。

对于php脚本，我使用这些解决方案阅读了一些主题：

Inotify-tools（Centos上默认不安装）
FAM（可能已过时？）
制作目录的md5哈希值，并将其与之前的哈希进行比较。

上述哪种解决方案是最好的方法？有人能为我提供一个php示例吗？不幸的是我的PHP技能不太好。

Answer 1

使用PHP函数 stat ，您可以获取目录的信息。

该文件在此处：http://php.net/manual/en/function.stat.php

例如，您可以获得修改时间和目录大小，如下所示：

dir_stat.php

<?php
$stat = stat('\path\images');
echo 'time: ' . $stat['mtime']; /* time of last modification (Unix timestamp) */
echo 'size: ' . $stat['size'];  /* size in bytes */
?>

在客户端，您可以检索目录信息并以固定的时间间隔进行比较。使用jQuery，示例代码可能如下所示。

<script language="javascript">

var myVar=setInterval(function(){chekUpdate()},5*60*1000); // at 5 minutes intervals
var stat_old = "";
function chekUpdate()
{
    $("#stat").load("/path/to/dir_stat.php",function(){
        var stat_new = $("#stat").html();
        if((stat_old != "") && (stat_old != stat_new)){
            refreshSlideShow();
        }
        stat_old = stat_new;
    });
}
function refreshSlideShow()
{
    // you can refresh your slideshow here.
}
</script>
<body>
<div id="stat">
</div>
</body>

Answer 2

这个想法是你每隔N分钟向服务器发出一次异步请求，服务器返回目录内容（例如JSON数组中的文件名）：如果它们自上次更新后发生了变化，则相应地修改DOM。因此，您只需要实现PHP服务来列出目标目录的内容并返回序列化文件名列表。没有哈希，也没有需要注入矿物质。

请注意，此设计对资源使用（主要是带宽，而且因为传入请求数量很大而言）不必要，因为如果目录在365天内未更改，则客户端仍会发出大量无用请求。显然可以通过引入所谓的服务器推送来优化资源使用：您的客户端可以与服务器保持长时间的连接，并且当发生变化时，服务器本身将新数据传递给所有连接的客户端

不幸的是，由于环境支持不佳，服务器发送的事件通常不会在PHP中开发，因此您必须切换到其他一些技术（谷歌用于彗星服务器或支持websocket的服务器），这就是为什么inotify永远不会来玩PHP（即使它有一个PHP包装器）。

Answer 3

不需要ajax调用只需更新src并传递随机查询字符串以强制浏览器在服务器上重新查找图像并在浏览器窗口中更新它们

 <script type='text/javascript'>
        function updateImages()
        {
             document.getElementById('img_slide1_element_id').src = 'Slide1.JPG?' + Math.random();
             document.getElementById('img_slide2_element_id').src = 'Slide2.JPG?' + Math.random();
                 window.setTimeout(function(){
                   updateImages();
                 }, 60000 * 10);
        }
        window.setTimeout(function(){
            updateImages();
        }, 60000 * 10);
    </script>

Answer 4

这是我的尝试：

<?php

$filename = "plaatjes/Dia1.JPG";
$myFile = "plaatjes/timestamp";

if (file_exists($myFile)) {
    $fh = fopen($myFile, 'r');
    $theData = fread($fh, filesize($myFile));
    fclose($fh);
}
else {
    $theData = 'x'; }

if (file_exists($filename)) {
    $timestamp = date ("F d Y H:i:s.", filemtime($filename));

    if ($theData === $timestamp) {
    echo "True";
    }
    else {
            echo "False";
            $fh = fopen($myFile, 'w') or die("can't open file");
            fwrite($fh, $timestamp);
            fclose($fh);
    }
}

?>

目录内容更改时刷新页面

4 个答案: