Electron渲染进程中不同JS类/文件间消息通信实现方法

嘿，我太懂你这种不想绕主进程折腾的心情了——渲染进程内的不同模块（类）之间通信，完全没必要走IPC到主进程再绕回来，这里有几个直接高效的纯渲染进程内方案：

Electron渲染进程默认支持Node.js API，所以可以直接用内置的EventEmitter实现一个全局事件总线，这就相当于渲染进程内部的“IPC通道”。

首先创建一个单独的事件总线文件，比如eventBus.js：

const { EventEmitter } = require('events');
// 导出一个单例的EventEmitter实例
module.exports = new EventEmitter();

然后在你的类文件里分别引入并使用：

// ModuleA.js（发送消息的类）
const eventBus = require('./eventBus');

class ModuleA {
  sendDataToModuleB() {
    // 触发自定义事件，携带数据
    eventBus.emit('module-a:data-updated', {
      content: 'Hello from Module A',
      timestamp: Date.now()
    });
  }
}

// ModuleB.js（接收消息的类）
const eventBus = require('./eventBus');

class ModuleB {
  constructor() {
    // 监听自定义事件
    eventBus.on('module-a:data-updated', (payload) => {
      console.log('Module B received:', payload);
      // 这里处理接收到的数据
    });
  }
}

这个方案的优势是轻量、语义化，完全在渲染进程内完成通信，没有任何主进程的开销。

如果你的项目开启了上下文隔离（contextIsolation: true）或者更偏向纯前端开发模式，可以用浏览器原生的CustomEvent机制，依托window对象实现全局事件通信。

// ModuleA.js（发送方）
class ModuleA {
  sendMessage() {
    // 创建自定义事件，携带数据在detail字段
    const updateEvent = new CustomEvent('renderer:module-data-change', {
      detail: {
        source: 'ModuleA',
        data: 'Hi from Module A'
      },
      bubbles: true, // 可选，允许事件冒泡
      cancelable: true
    });
    // 向window对象派发事件
    window.dispatchEvent(updateEvent);
  }
}

// ModuleB.js（接收方）
class ModuleB {
  constructor() {
    // 在window上监听自定义事件
    window.addEventListener('renderer:module-data-change', (event) => {
      console.log('Module B got data:', event.detail);
      // 处理数据逻辑
    });
  }
}

这个方案完全基于浏览器API，不受Electron Node环境配置的限制，适合需要严格遵循前端安全规范的场景。注意给事件名加专属前缀（比如你的应用名），避免和其他第三方库的事件冲突。

如果你的项目开启了上下文隔离（Electron推荐的安全配置），直接使用Node.js的EventEmitter会因为上下文隔离无法共享实例，这时候可以通过contextBridge在预加载脚本中把事件总线暴露到渲染上下文：

// preload.js（预加载脚本）
const { contextBridge } = require('electron');
const { EventEmitter } = require('events');

const eventBus = new EventEmitter();

// 把事件总线的核心方法暴露到渲染进程的全局对象
contextBridge.exposeInMainWorld('appEventBus', {
  on: (eventName, callback) => {
    eventBus.on(eventName, callback);
  },
  emit: (eventName, payload) => {
    eventBus.emit(eventName, payload);
  },
  // 可选：添加移除监听的方法
  off: (eventName, callback) => {
    eventBus.off(eventName, callback);
  }
});

然后在渲染进程的类里直接使用全局暴露的appEventBus：

// ModuleA.js
class ModuleA {
  sendData() {
    window.appEventBus.emit('data-update', { content: 'Hello' });
  }
}

// ModuleB.js
class ModuleB {
  constructor() {
    window.appEventBus.on('data-update', (payload) => {
      console.log('Received:', payload);
    });
  }
}

这个方案既符合Electron的安全规范，又实现了无主进程参与的渲染进程内通信。

如果你的模块分布在同一个窗口的不同iframe中，可以用浏览器的postMessage API：

// 父窗口的类发送消息到iframe
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage({ data: 'Hi from parent' }, 'https://your-app-origin'); // 生产环境务必指定精确的origin

// iframe内的类接收消息
window.addEventListener('message', (event) => {
  // 验证消息来源，避免恶意注入
  if (event.origin === 'https://your-app-origin') {
    console.log('Iframe received:', event.data);
  }
});

以上所有方案都完全绕过了主进程，比你之前设想的中转方式高效得多，根据你的项目配置选最适合的就行～

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