Blazor WebAssembly PWA会议室大屏事件自动刷新方案咨询

针对你提出的两个核心需求，这里给出轻量且精准的实现方案，完全避免不必要的频繁刷新：

一、InProgress事件结束时自动刷新 #

核心思路是精准监听当前进行中会议的结束时间，仅在该时间点触发刷新，而非固定间隔轮询：

1. 每次数据加载/刷新后，筛选出状态为InProgress的事件（会议室同一时段通常仅一个）
2. 计算该事件结束时间与当前时间的差值，设置一次性定时器
3. 定时器触发时，重新拉取最新数据并更新页面
4. 每次刷新前要清除上一次的InProgress定时器，避免重复触发

示例代码：

let inProgressTimer = null;

// 核心数据刷新函数
function fetchAndUpdateEvents() {
  // 清除上一轮的InProgress定时器
  if (inProgressTimer) {
    clearTimeout(inProgressTimer);
    inProgressTimer = null;
  }

  // 拉取最新会议数据（替换为你的API地址）
  fetch('/api/daily-events')
    .then(res => res.json())
    .then(events => {
      // 更新大屏UI展示（替换为你的渲染逻辑）
      renderEvents(events);

      // 设置新的InProgress结束定时器
      const currentMeeting = events.find(evt => evt.status === 'InProgress');
      if (currentMeeting) {
        const endTime = new Date(currentMeeting.endTime).getTime();
        const now = Date.now();
        const delay = endTime - now;
        
        // 仅当结束时间在未来时设置定时器
        if (delay > 0) {
          inProgressTimer = setTimeout(fetchAndUpdateEvents, delay);
        }
      }
    });
}

二、次日自动刷新 #

核心思路是计算距离次日上班前的时间差，设置一次性定时器，刷新后自动续定下一日的定时器，确保次日人员进入会议室时看到最新数据：

1. 定义次日刷新时间（建议设为次日7:59，提前于会议开始时间8点）
2. 计算当前时间到该时间的差值，设置定时器
3. 定时器触发时执行数据刷新，刷新后重新计算下一日的刷新时间并续定

示例代码：

// 计算距离次日7:59的时间差（毫秒）
function getNextDailyRefreshDelay() {
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  tomorrow.setHours(7, 59, 0, 0); // 提前1分钟刷新，确保数据加载完成
  return tomorrow.getTime() - Date.now();
}

// 初始化每日刷新定时器
function setupDailyRefresh() {
  const delay = getNextDailyRefreshDelay();
  setTimeout(() => {
    fetchAndUpdateEvents();
    // 刷新后自动续定下一日的定时器
    setupDailyRefresh();
  }, delay);
}

// 页面首次加载时启动
document.addEventListener('DOMContentLoaded', () => {
  fetchAndUpdateEvents();
  setupDailyRefresh();
});

额外优化点 #

• 如果存在会议临时延长/调整的情况，可在数据刷新时自动修正InProgress的定时器，确保刷新时机始终准确
• 非会议时段（16点后至次日8点前），若没有InProgress事件，无需设置额外定时器，避免无效资源消耗

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