如何实现树莓派网页中热电偶温度数值的动态更新？

我来给你几个实用的方案，帮你实现网页温度的动态更新，不用再手动刷新页面啦～

方案1：AJAX定时轮询（最简单易上手） #

这个方案的思路很直白：让浏览器每隔一段时间自动发个请求到服务器，拉取最新的温度值，然后更新页面上的显示。对新手非常友好，不需要额外配置。

步骤1：创建单独的温度接口 #

先写一个get_temp.php文件，专门用来返回温度数值（这样前端请求更简洁）：

<?php
// 读取温度文件内容，去掉多余的换行/空格
$temp = trim(file_get_contents('Temp.ESP'));
// 直接输出温度值
echo $temp;
?>

步骤2：修改原页面添加自动更新逻辑 #

更新你的index.php，加入JavaScript代码实现定时请求和页面更新：

<html>
<head>
    <h2 id="temperature">-- °C</h2>
    <script>
        // 设置刷新间隔，比如5秒更新一次（单位：毫秒）
        const refreshDelay = 5000;

        // 定义更新温度的函数
        function updateTemperature() {
            const xhr = new XMLHttpRequest();
            // 请求成功后的处理
            xhr.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 200) {
                    // 把获取到的温度值更新到页面上
                    document.getElementById('temperature').textContent = this.responseText + ' °C';
                }
            };
            // 加时间戳避免浏览器缓存旧数据
            xhr.open('GET', 'get_temp.php?' + new Date().getTime(), true);
            xhr.send();
        }

        // 页面加载完成后立即更新一次，然后开始定时循环更新
        window.onload = function() {
            updateTemperature();
            setInterval(updateTemperature, refreshDelay);
        };
    </script>
</head>
</html>

优缺点 #

• ✅ 优点：实现简单，几乎不需要额外学习成本，兼容所有现代浏览器
• ❌ 缺点：会有固定的延迟（比如设置5秒的话，最多可能等5秒才看到更新），频繁请求会占用少量服务器资源，适合温度变化不太快的场景

方案2：Server-Sent Events（SSE，高效单向推送） #

这个方案更高效：服务器主动把新的温度数据推送给浏览器，不用浏览器反复发请求。非常适合这种“服务器有新数据就通知客户端”的场景，延迟更低，资源占用也更少。

步骤1：创建SSE数据流接口 #

写一个stream_temp.php文件，用来持续推送温度更新：

<?php
// 设置SSE相关的响应头
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); // 禁止缓存
header('Connection: keep-alive'); // 保持长连接

// 持续监听温度文件变化
while (true) {
    $currentTemp = trim(file_get_contents('Temp.ESP'));
    // 按照SSE的格式发送数据
    echo "data: {$currentTemp}\n\n";
    // 立即输出内容，不让数据留在缓冲区
    ob_flush();
    flush();
    // 每隔1秒检查一次文件，避免太频繁占用资源
    sleep(1);
}
?>

步骤2：修改前端页面接收推送 #

更新index.php，加入SSE的监听逻辑，同时做浏览器兼容处理：

<html>
<head>
    <h2 id="temperature">-- °C</h2>
    <script>
        // 检查浏览器是否支持SSE
        if (typeof(EventSource) !== "undefined") {
            // 连接到SSE数据流接口
            const tempSource = new EventSource("stream_temp.php");
            // 接收服务器推送的新温度
            tempSource.onmessage = function(event) {
                document.getElementById('temperature').textContent = event.data + ' °C';
            };
            // 处理连接错误的情况
            tempSource.onerror = function(error) {
                console.error('SSE连接出现问题:', error);
                tempSource.close();
            };
        } else {
            // 如果浏览器不支持SSE，自动降级到AJAX轮询方案
            alert('你的浏览器不支持SSE，将使用定时刷新模式');
            const refreshDelay = 5000;
            function updateTemp() {
                const xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (this.readyState ===4 && this.status===200) {
                        document.getElementById('temperature').textContent = this.responseText + ' °C';
                    }
                };
                xhr.open('GET', 'get_temp.php?' + new Date().getTime(), true);
                xhr.send();
            }
            window.onload = function() {
                updateTemp();
                setInterval(updateTemp, refreshDelay);
            };
        }
    </script>
</head>
</html>

优缺点 #

• ✅ 优点：服务器主动推送，延迟极低，资源占用比轮询少很多，代码复杂度适中
• ❌ 缺点：部分非常老旧的浏览器不支持，但我们已经做了降级处理，不影响使用

方案3：WebSocket（双向通信，适合复杂场景） #

如果之后你需要做更多双向交互的功能（比如通过网页控制单片机），可以考虑用WebSocket。它能建立持久的双向连接，服务器和客户端都能随时发送消息。不过对于单纯的温度更新来说，SSE已经足够，这个方案稍复杂一些。

大致步骤 #

1. 用Composer安装PHP的WebSocket库（比如Ratchet）
2. 编写WebSocket服务器脚本，监听Temp.ESP文件的变化，一旦文件更新就把新温度推送给所有连接的客户端
3. 前端用WebSocket API连接服务器，接收温度更新并显示

这个方案适合有一定PHP后端基础的用户，如果你只是需要温度动态更新，前面两个方案更省心。

总结推荐 #

如果追求最简单，选AJAX定时轮询；如果想要更高效、更低延迟的体验，选SSE方案，这也是我最推荐的，完全适配你的温度监控场景。

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