Electron+Angular监控应用：如何优化持续增长的文件队列处理？

针对你遇到的定时器不同步、误删未查看文件的问题，核心思路是用状态追踪替代盲目的定时删除，同时让前端自主控制文件展示节奏，既保证文件有足够展示时间，又避免状态不一致。

一、Electron端：基于文件查看状态的生命周期管理 #

放弃固定间隔删除旧文件的逻辑，改为追踪每个文件的"未查看/已查看"状态，只清理已被前端确认查看的文件：

1. 维护两个文件集合
   • pendingFiles：存储未被前端查看的文件（用Map以文件唯一ID为键，方便快速查找）
   • processedFiles：存储已被前端确认查看的文件
2. 文件流转逻辑
   • 收到第三方仪器的新文件时，生成唯一ID，加入pendingFiles，同时通过IPC发送给前端
   • 监听前端发来的fileViewed确认信号，将对应文件从pendingFiles移至processedFiles
   • 定期清理processedFiles中超出保留时长的旧文件（比如保留最近24小时），这个定时任务是安全的，因为都是已查看的文件

Electron主进程示例代码：

const { ipcMain, BrowserWindow } = require('electron');
const mainWindow = BrowserWindow.getFocusedWindow();

const pendingFiles = new Map(); // key: fileId, value: { path, createTime, ... }
const processedFiles = [];
const RETAIN_DURATION = 24 * 60 * 60 * 1000; // 保留24小时的已处理文件

// 处理新生成的输入文件
function handleNewInputFile(fileInfo) {
  const fileId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
  pendingFiles.set(fileId, { ...fileInfo, fileId });
  mainWindow.webContents.send('new-pending-file', { ...fileInfo, fileId });
}

// 监听前端的文件查看确认
ipcMain.on('file-viewed', (event, fileId) => {
  if (pendingFiles.has(fileId)) {
    const file = pendingFiles.get(fileId);
    processedFiles.push(file);
    pendingFiles.delete(fileId);
  }
});

// 定期清理已处理的旧文件
setInterval(() => {
  const cutoffTime = Date.now() - RETAIN_DURATION;
  // 过滤出需要保留的文件
  const keepFiles = processedFiles.filter(file => file.createTime > cutoffTime);
  // 删除被过滤掉的文件（磁盘操作）
  processedFiles.filter(file => file.createTime <= cutoffTime).forEach(file => {
    // 执行删除输入文件和对应输出文件的逻辑
    fs.unlinkSync(file.inputPath);
    fs.unlinkSync(file.outputPath);
  });
  processedFiles.splice(0, processedFiles.length, ...keepFiles);
}, 60 * 60 * 1000); // 每小时清理一次

二、前端Angular：受控队列+自主展示节奏 #

放弃固定间隔轮询队列的逻辑，改为用队列+定时器结合的方式，自主控制文件展示，同时保证每个文件有足够的展示时间：

1. 前端维护displayQueue队列，收到Electron发来的新文件时加入队列
2. 实现showNextFile函数，负责从队列取文件展示，并启动定时器，计时结束后自动切换到下一个文件（同时给Electron发确认信号）
3. 支持手动切换（比如用户想提前看下一个文件），点击按钮时终止当前定时器，直接触发showNextFile

Angular组件示例代码：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ElectronService } from './electron.service';

@Component({
  selector: 'app-file-display',
  templateUrl: './file-display.component.html'
})
export class FileDisplayComponent implements OnInit, OnDestroy {
  displayQueue: Array<{ fileId: string, path: string, content: string }> = [];
  currentFile: any = null;
  displayTimer: any = null;
  DISPLAY_DURATION = 10000; // 每个文件展示10秒

  constructor(private electronService: ElectronService) {}

  ngOnInit() {
    // 监听Electron发来的新文件
    this.electronService.ipcRenderer.on('new-pending-file', (event, file) => {
      this.displayQueue.push(file);
      // 如果当前没有展示文件，直接启动展示
      if (!this.currentFile) {
        this.showNextFile();
      }
      // 发送收到确认，避免Electron重复发送
      this.electronService.ipcRenderer.send('file-received', file.fileId);
    });
  }

  showNextFile() {
    // 清除当前定时器（如果存在）
    if (this.displayTimer) {
      clearTimeout(this.displayTimer);
    }
    // 队列为空时清空当前展示
    if (this.displayQueue.length === 0) {
      this.currentFile = null;
      return;
    }
    // 取出队列第一个文件
    this.currentFile = this.displayQueue.shift();
    // 执行文件展示逻辑（比如渲染内容、加载预览等）
    
    // 启动定时器，时间到后自动切换下一个
    this.displayTimer = setTimeout(() => {
      // 通知Electron该文件已查看
      this.electronService.ipcRenderer.send('file-viewed', this.currentFile.fileId);
      this.showNextFile();
    }, this.DISPLAY_DURATION);
  }

  // 手动切换下一个文件
  onManualNext() {
    if (this.currentFile) {
      this.electronService.ipcRenderer.send('file-viewed', this.currentFile.fileId);
    }
    this.showNextFile();
  }

  ngOnDestroy() {
    if (this.displayTimer) {
      clearTimeout(this.displayTimer);
    }
    this.electronService.ipcRenderer.removeAllListeners('new-pending-file');
  }
}

三、额外可靠性保障 #

• IPC消息确认：Electron发送文件后，等待前端的file-received信号，未收到时可重试2-3次，避免因IPC丢包导致文件丢失
• 前端重启同步：Angular应用启动时，主动向Electron请求当前pendingFiles的列表，避免重启后丢失未查看的文件

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