Pyramid框架下服务器图片变更后客户端自动同步方案咨询

方法一：优化定时器刷新（解决缓存问题） #

你之前的定时器方案没生效，核心原因是浏览器缓存了旧的home.png，导致重复请求时直接返回本地缓存版本。只需给请求URL添加唯一参数规避缓存，同时确保图片加载完成后再绘制即可：

修改前端定时器代码：

setInterval(() => {
    var background = new Image();
    // 追加时间戳参数，强制浏览器请求最新图片
    background.src = "home.png?t=" + Date.now();
    background.onload = function() {
        ctx.drawImage(background, 0, 0);
    };
    console.log("检查图片更新");
}, 15000);

同时在Pyramid视图中添加禁用缓存的响应头，进一步避免浏览器缓存：

@view_config(route_name='png')
def test_page(request):
    response = FileResponse(
        './home.png',
        request=request,
        content_type='image/png'
    )
    # 设置缓存控制头，禁止浏览器缓存
    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
    response.headers['Pragma'] = 'no-cache'
    response.headers['Expires'] = '0'
    return response

方法二：服务器主动推送（事件触发式更新） #

如果想要真正实现「资源变更即触发更新」，可以用Server-Sent Events（SSE）实现服务器主动通知客户端，无需定时轮询，效率更高：

1. 配置Pyramid的SSE路由与视图 #

在主配置文件中添加路由：

config.add_route('image_update', '/image-update')

实现SSE视图与文件监听逻辑：

import time
from queue import Queue
from pyramid.response import Response
from watchdog.observers import Observer
from watchdog.events import FileSystemEventHandler

# 监听图片文件变更的处理器
class ImageChangeHandler(FileSystemEventHandler):
    def __init__(self, queue):
        self.queue = queue
    def on_modified(self, event):
        if event.src_path.endswith('home.png'):
            self.queue.put('update')

@view_config(route_name='image_update')
def image_update_stream(request):
    # 设置SSE响应头
    headers = {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
    }
    response = Response(content_type='text/event-stream', headers=headers)
    response.app_iter = sse_generator(request)
    return response

def sse_generator(request):
    # 初始化变更通知队列
    queue = request.registry.settings.get('image_change_queue')
    if not queue:
        queue = Queue()
        request.registry.settings['image_change_queue'] = queue
        # 启动文件监听
        event_handler = ImageChangeHandler(queue)
        observer = Observer()
        observer.schedule(event_handler, path='./', recursive=False)
        observer.start()

    # 持续推送事件
    while not request.response.finished:
        try:
            message = queue.get(timeout=1)
            yield f'data: {message}\n\n'
        except:
            # 发送心跳包维持连接
            yield ': heartbeat\n\n'
            time.sleep(5)

2. 前端监听SSE并更新图片 #

修改前端代码，添加SSE监听逻辑：

// 初始化加载图片
var background = new Image();
background.src = "home.png?t=" + Date.now();
background.onload = function() {
    ctx.drawImage(background, 0, 0);
};

// 建立SSE连接，监听服务器推送的更新事件
const eventSource = new EventSource('/image-update');
eventSource.onmessage = function(event) {
    if (event.data === 'update') {
        // 加载并绘制最新图片
        var newBackground = new Image();
        newBackground.src = "home.png?t=" + Date.now();
        newBackground.onload = function() {
            ctx.drawImage(newBackground, 0, 0);
            background = newBackground; // 更新缓存的图片对象
        };
    }
};

// 处理连接异常
eventSource.onerror = function(error) {
    console.error('SSE连接错误:', error);
    eventSource.close();
};

这个方案能实现图片在服务器端修改后，立刻通知客户端刷新，完全无需定时轮询。

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