Electron IPC消息重复触发问题排查求助

问题原因 #

1. 主进程重复绑定IPC监听器：每次触发document事件生成新文档窗口时，都会给ipcMain新增一个document-params监听器，旧监听器未被移除。当新窗口发送参数请求时，所有历史监听器都会触发，向当前窗口发送各自保存的模板和数据，导致窗口收到多条重复/历史消息。
2. 渲染进程使用持久化监听器：渲染进程通过ipcRenderer.on()绑定的是持久监听器，不会自动销毁。即使窗口对应的DOM结构已切换（比如打开不同文档），旧监听器仍会响应消息，尝试操作不存在的DOM元素，从而抛出错误。

解决方法 #

1. 主进程：使用一次性监听器避免重复绑定 #

修改主进程中document事件的处理逻辑，改用ipcMain.once()绑定一次性监听器，确保每个参数请求只会被处理一次，触发后自动移除监听器：

const { ipcMain, BrowserWindow } = require("electron");
const path = require('path');

let popup;

const templates = {
    'contract': DOCUMENT_CONTRACT_WEBPACK_ENTRY,
    'review-draft': DOCUMENT_REVIEW_DRAFT_WEBPACK_ENTRY,
};

const createDocument = (template, title, data) => {
    popup = new BrowserWindow({
        show: true,
        webPreferences: {
            preload: DOCUMENT_CONTRACT_PRELOAD_WEBPACK_ENTRY
        },
        title: title,
        parent: global.mainWindow,
        modal: true,
    });
    popup.loadURL(templates[template]);
    popup.maximize();
    popup.show();
};

ipcMain.on('document', (event, template, title, data) => {
    const onPassParamsToDocument = (event) => {
        event.sender.send('document-params', template, data);
    };
    // 使用once绑定一次性监听器，触发后自动销毁
    ipcMain.once('document-params', onPassParamsToDocument);
    createDocument(template, title, data);
});

2. 渲染进程：用一次性监听器处理参数 #

更新预加载脚本，新增一次性监听方法，再修改渲染进程的监听器绑定逻辑，确保每个窗口仅接收一次参数：

更新../preload.js：

const { ipcRenderer } = require('electron');

export const preloadCommon = {
    subscribe: (channel, callback) => {
        ipcRenderer.on(channel, callback);
    },
    // 新增一次性监听方法
    subscribeOnce: (channel, callback) => {
        ipcRenderer.once(channel, callback);
    },
    getPopupParams: () => {
        ipcRenderer.send('popup-params');
    },
    getDocumentParams: () => {
        ipcRenderer.send('document-params');
    },
    popup: (name, data) => {
        ipcRenderer.send('popup', name, data);
    },
    generateDocument: (template, title, data) => {
        ipcRenderer.send('document', template, title, data);
    }
};

修改/src/renderer/windows/documents/renderer.js：

import '../renderer.js';

function bootstrapContract(data) {
    // Document appropriate DOM manipulation, such as injecting <li> elements from data
}

function bootstrapReviewDraft(data) {
    // Document appropriate DOM manipulation, such as injecting <li> elements from data
}

function dispatch(template, data) {
    switch (template) {
        case 'contract':
            bootstrapContract(data);
            break;
        case 'review-draft':
            bootstrapReviewDraft(data);
            break;
        default:
            break;
    }
}

// 使用一次性监听器，仅接收一次参数后自动取消监听
window.electronAPI.subscribeOnce('document-params', (event, template, data) => dispatch(template, data));
window.electronAPI.getDocumentParams();

3. 可选优化：窗口关闭时清理资源 #

如果存在其他持久监听器，可在文档窗口关闭时主动清理，避免内存泄漏：

const createDocument = (template, title, data) => {
    popup = new BrowserWindow({
        // ... 原有配置
    });
    
    // 窗口关闭时移除对应监听器并释放引用
    popup.on('closed', () => {
        ipcMain.removeListener('document-params', onPassParamsToDocument);
        popup = null;
    });
    
    popup.loadURL(templates[template]);
    popup.maximize();
    popup.show();
};

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