使用BottlePy实现Raspberry Pi DIY声呐扫描地图网页自动更新咨询

核心问题说明 #

当前代码存在两个核心问题会导致需求无法实现：

• 固定300ms轮询触发扫描逻辑，和不固定的扫描时长冲突，容易出现请求堆叠、扫描流程异常
• 前端图片URL没有变化时，浏览器会复用本地缓存，即使后端更新了图片也无法自动刷新

后端代码修改 #

调整逻辑：将扫描生成图片的逻辑放到独立后台线程循环执行，避免接口请求触发扫描；新增接口返回图片最新更新时间戳，供前端比对判断是否需要刷新。

import pigpio
import time
import RPi.GPIO as GPIO
import numpy as np
import cv2
import math
from PIL import Image as im
import threading

import bottle
from bottle import route, run, template, BaseTemplate, static_file, json_dumps

app = bottle.default_app()
BaseTemplate.defaults['get_url'] = app.get_url

# 全局变量存图片最新更新时间戳
last_update = 0

# 后台扫描线程函数
def scan_loop():
    global last_update
    while True:
        # 你原来的扫描+生成图片逻辑
        # matrix generation for map - newmapp
        data=im.fromarray(newmapp)
        data.save('/home/pi/Desktop/servo_web/static/map.png')
        # 更新时间戳
        last_update = time.time()

@route('/')
def index():
    return template('index.html')

@route('/<filename:path>', name='static')
def serve_static(filename):
    return static_file(filename, root='static')

@route('/refresh')
def refresh():
    # 直接返回最新更新时间戳，不做扫描逻辑
    return json_dumps({"last_update": last_update})

if __name__ == "__main__":
    # 启动后台扫描线程
    scan_thread = threading.Thread(target=scan_loop, daemon=True)
    scan_thread.start()
    # 启动web服务，host改0.0.0.0可支持局域网其他设备访问
    run(host='0.0.0.0', port=8080)

前端代码修改 #

调整逻辑：轮询接口获取最新更新时间，比对发现更新后，给图片URL加时间戳参数强制跳过浏览器缓存，实现自动刷新。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>HARTA</title>
</head>
<body>
    <!-- 给img加个id方便选择 -->
    <img id="sonar-map" src="{{ get_url('static', filename='map.png') }}" />
    <script>
      // 存上一次的更新时间，初始为0
      let lastUpdateTime = 0;
      const imgUrl = "{{ get_url('static', filename='map.png') }}";

      $(document).ready(function(){
        // 轮询间隔可以调整到1秒，减少不必要的请求
        setInterval(refreshFunction, 1000);
      });

      function refreshFunction(){
        $.getJSON('/refresh', function(res){
          // 比对时间戳，有更新才刷新图片
          if (res.last_update > lastUpdateTime) {
            lastUpdateTime = res.last_update;
            // 加时间戳参数跳过缓存
            $('#sonar-map').attr('src', imgUrl + '?t=' + lastUpdateTime);
          }
        });
      }
    </script>
</body>
</html>

额外说明 #

• 后台线程会循环执行扫描，每次扫描完成自动更新时间戳，前端不需要触发扫描逻辑，和不固定的扫描时长完全适配
• 加时间戳参数的方式可以100%避免浏览器缓存旧图片

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