服务端数据变更时低功耗刷新手机客户端的PHP/JS实现方案咨询

这个需求在移动端场景非常典型——既要避免频繁请求消耗电量和流量，又要保证数据更新能及时触达。结合你提到的服务端可以读取文件修改时间的条件，我整理了几个从易到难、各有侧重的实现方案：

1. 基于文件修改时间的优化轮询（最易实现） #

这是对传统轮询的轻量化改造，利用HTTP的Last-Modified和If-Modified-Since头来减少无效请求：

实现思路 #

• 客户端首次请求时，服务端返回数据的同时，在响应头里带上文件的最后修改时间（Last-Modified）。
• 后续客户端每次请求，都会在请求头里带上上次收到的Last-Modified值（If-Modified-Since）。
• 服务端对比当前文件的修改时间和客户端传来的时间：如果一致，直接返回304 Not Modified（仅响应头，无数据）；如果不一致，返回新数据和最新的Last-Modified。

服务端PHP示例 #

<?php
$dataFile = '/path/to/your/data.json';
$lastModified = filemtime($dataFile);

// 检查客户端传来的If-Modified-Since头
if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
    $clientModified = strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']);
    if ($clientModified === $lastModified) {
        header('HTTP/1.1 304 Not Modified');
        exit;
    }
}

// 设置响应头并返回数据
header('Last-Modified: ' . gmdate('D, d M Y H:i:s', $lastModified) . ' GMT');
header('Content-Type: application/json');
echo file_get_contents($dataFile);
?>

客户端JavaScript示例 #

let lastModified = null;

function fetchData() {
    const options = {};
    if (lastModified) {
        options.headers = {
            'If-Modified-Since': lastModified
        };
    }

    fetch('/path/to/server/api.php', options)
        .then(response => {
            if (response.status === 304) {
                // 数据未变更，稍后重试（可以根据情况调整间隔）
                setTimeout(fetchData, 30000); // 30秒后重试
                return;
            }
            // 更新lastModified
            lastModified = response.headers.get('Last-Modified');
            return response.json();
        })
        .then(data => {
            if (data) {
                // 更新客户端UI
                updateUI(data);
            }
            // 数据变更后，缩短重试间隔，保证及时获取后续更新
            setTimeout(fetchData, 5000); // 5秒后重试
        })
        .catch(error => {
            // 请求失败，稍后重试
            setTimeout(fetchData, 60000); // 1分钟后重试
        });
}

// 初始化请求
fetchData();

优缺点 #

• ✅ 实现简单，兼容性极强（所有HTTP客户端都支持）
• ✅ 无数据变更时仅传输少量响应头，极大节省流量和电量
• ❌ 仍存在周期性请求，无法做到实时更新（最多延迟你设置的轮询间隔）

2. 长轮询（Long Polling，更及时） #

长轮询能让客户端在数据变更时立刻收到更新，同时避免频繁的无效请求：

实现思路 #

• 客户端发起请求后，服务端不会立刻响应，而是hold住连接，定期检查文件是否更新。
• 如果在超时前检测到文件修改，立刻返回新数据；如果超时仍无变更，返回空响应或提示信息。
• 客户端收到响应后，无论是否有数据，都会立刻再次发起请求，保持"长连接"的状态。

服务端PHP示例 #

<?php
ignore_user_abort(true); // 忽略客户端断开连接
set_time_limit(30); // 设置超时时间为30秒
$dataFile = '/path/to/your/data.json';
$initialMtime = filemtime($dataFile);

// 循环检查文件修改时间
while (true) {
    clearstatcache(); // 清除文件状态缓存，确保获取最新mtime
    $currentMtime = filemtime($dataFile);
    if ($currentMtime !== $initialMtime) {
        // 数据已更新，返回新数据
        header('Content-Type: application/json');
        echo file_get_contents($dataFile);
        exit;
    }
    // 每2秒检查一次，避免频繁读磁盘
    sleep(2);
}
?>

客户端JavaScript示例 #

function longPoll() {
    fetch('/path/to/long-poll-api.php')
        .then(response => response.json())
        .then(data => {
            if (data) {
                // 更新客户端UI
                updateUI(data);
            }
            // 立刻发起下一次轮询
            longPoll();
        })
        .catch(error => {
            // 网络异常或超时，稍等几秒后重试
            setTimeout(longPoll, 5000);
        });
}

// 启动长轮询
longPoll();

优缺点 #

• ✅ 数据变更时几乎实时推送，延迟极低
• ✅ 无变更时不会频繁发起请求，节省资源
• ❌ 服务端需要hold住连接，对服务器资源有一定消耗（需注意nginx/apache的超时配置）
• ❌ PHP的进程模型可能限制并发连接数（如果是高并发场景，可能需要配合Swoole等扩展）

3. Server-Sent Events（SSE，最规范的推送方案） #

SSE是HTML5标准的单向推送技术，专门用于服务端向客户端主动发送更新，非常适合你的场景：

实现思路 #

• 服务端输出Content-Type: text/event-stream响应头，保持长连接，定期检查文件修改时间。
• 当文件更新时，服务端发送一条事件消息给客户端；客户端通过EventSource对象监听事件，自动处理重连。

服务端PHP示例 #

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');

$dataFile = '/path/to/your/data.json';
$lastMtime = filemtime($dataFile);

while (true) {
    clearstatcache();
    $currentMtime = filemtime($dataFile);
    if ($currentMtime !== $lastMtime) {
        $lastMtime = $currentMtime;
        $data = file_get_contents($dataFile);
        // 发送SSE事件
        echo "data: {$data}\n\n";
        flush(); // 强制输出缓冲区内容
        ob_flush();
    }
    sleep(2);
}
?>

客户端JavaScript示例 #

const eventSource = new EventSource('/path/to/sse-api.php');

// 监听消息事件
eventSource.onmessage = function(event) {
    const data = JSON.parse(event.data);
    // 更新客户端UI
    updateUI(data);
};

// 监听错误事件
eventSource.onerror = function(error) {
    console.error('SSE连接错误:', error);
    // 可以在这里处理重连逻辑（EventSource默认会自动重连）
};

优缺点 #

• ✅ 符合标准，自动处理重连、心跳等逻辑，代码简洁
• ✅ 数据变更时实时推送，无多余请求
• ❌ 仅支持单向推送（如果需要客户端向服务端发消息，还要配合其他方式）
• ❌ 部分老旧浏览器不支持（但现代手机浏览器基本都支持）

方案选择建议 #

• 如果追求最快实现、兼容性最高：选优化轮询
• 如果需要尽可能低的延迟：选长轮询或SSE
• 如果是Web客户端且希望代码更简洁规范：优先选SSE

内容的提问来源于stack exchange，提问作者toncsi