自己实现一个Electron跨进程消息组件（新书自荐）

2021-12-23 08:28:54 浏览数 (1)

我们知道开发Electron应用，难免要涉及到跨进程通信，以前Electron内置了remote模块，极大的简化了跨进程通信的开发工作，但这也带来了很多问题，具体的细节请参与我之前写的文章：

https://www.cnblogs.com/liulun/p/15217180.html

Electron团队把remote模块拿掉之后，开发者就只能使用ipcRenderer，ipcMain，webContents等模块收发跨进程消息了，这并没有什么问题，但写起来非常麻烦，跨进程消息多了之后，也很难管理维护。这就促使着我们思考如何实现一个大一统的跨进程事件组件。下面我就介绍一种方法。

首先这个组件整合了NodeJs的events模块和Electron收发事件的模块，所以先把这些模块引入进来

代码语言：javascript复制
let events = require('events')
let { ipcRenderer, ipcMain, webContents } = require('electron')

我们假定这个组件的类名为Eventer，我们在这个类的构造函数中，实例化了一个EventEmitter对象，让它来负责监听和发射事件。

代码语言：javascript复制
constructor() {
  this.instance = new events.EventEmitter()
  //this.instance.setMaxListeners(60) //Infinity
  this.initEventPipe()
}

首先，无论是渲染进程还是主进程使用这个模块，都会执行这个构造函数，创建一个EventEmitter对象；但渲染进程的EventEmitter对象与主进程的EventEmitter对象是不同的；不同渲染进程间的EventEmitter对象也是不同的，但同一个进程内的EventEmitter对象是相同的，共享同一个EventEmitter对象，这里我们用到了单例模式，是通过下面这行代码实现的：

代码语言：javascript复制
export let eventer = new Eventer()

也就是说某个进程第一次import这个组件的时候，Eventer类就实例化了，它的构造函数就执行过了，无论这个进程再import多少次这个类，都是引用的同一个eventer对象，这个类在同一个进程内不会被实例化多次。

默认情况下EventEmitter实例最多可为任何单个事件注册10个监听器，如果你嫌这个数量太少，可以通过setMaxListeners方法把这个数字设置大一些，设置为Infinity就没有任何数量限制了，但尽量不要这么做，要不然某个事件被反复注册了，你也不知道。

接下来我们就在initEventPipe方法内初始化了我们自己的跨进程消息管道

代码语言：javascript复制
private initEventPipe() {
  if (ipcRenderer) {
    ipcRenderer.on('__eventPipe', (e: Electron.IpcRendererEvent, { eventName, eventArgs }) => {
      this.instance.emit(eventName, e, eventArgs)
    })
  } else if (ipcMain) {
    ipcMain.handle('__eventPipe', (e: Electron.IpcMainInvokeEvent, { eventName, eventArgs, broadcast }) => {
      this.instance.emit(eventName, e, eventArgs)
      if (!broadcast) return
      webContents.getAllWebContents().forEach((wc) => {
          if (wc.id != e.sender.id) {
            wc.send('__eventPipe', { eventName, eventArgs })
          }
      })
    })
  }
}

在这个方法内，我们通过ipcRenderer、ipcMain是否存在来判断当前进程是渲染进程还是主进程；

如果是渲染进程则用ipcRenderer监听一个名为__eventPipe的消息；如果是主进程我们则通过ipcMain监听一个名为__eventPipe的消息。

无论是哪个进程，处理这个消息的回调函数都有两个参数，第一个参数是Electron为跨进程消息提供的消息体，第二个参数，是我们自己构造的（后面我们会讲），他们结构是相同的，都具有eventName和eventArgs属性；

在这个回调函数中，我们在当前进程的EventEmitter对象上发射一个事件，这个事件的名字就是eventName属性的值，事件有两个参数，一个是Electron为跨进程消息提供的消息体，另一个是eventArgs对应的值。

如果当前进程是主进程，我们还会进一步判断是不是有broadcast属性，如果有，那么就继续给所有其他的webContents发送__eventPipe消息，消息体是由eventName和eventArgs两个属性组成的。

这里我们通过e.sender.id来判断消息是从哪个渲染进程发来的，当转发这个消息给其他webContents时，要排除掉那个发来消息的webContents。

接下来我们看一下与事件发射有关的一系列方法

代码语言：javascript复制
emitInProcess(eventName: string, eventArgs?: any) {
  this.instance.emit(eventName, eventArgs)
}

这个方法在当前进程的EventEmitter对象上发射事件。它最简单了，不多做介绍。

代码语言：javascript复制
emitCrossProcess(eventName: string, eventArgs?: any) {
  if (ipcMain) {
    webContents.getAllWebContents().forEach((wc) => {
      wc.send('__eventPipe', { eventName, eventArgs })
    })
  } else if (ipcRenderer) {
    ipcRenderer.invoke('__eventPipe', { eventName, eventArgs })
  }
}

这个方法发射一个跨进程消息，如果是渲染进程调用这个方法，那么消息就是发送给主进程的，如果是主进程调用这个方法，那么消息就是发送给所有的渲染进程的。

消息的名字就是__eventPipe，消息体是eventName, eventArgs两个参数组成的对象，我们前面讲的initEventPipe方法内有监听这个消息的逻辑。

代码语言：javascript复制
emitToAllProcess(eventName: string, eventArgs?: any) {
  this.instance.emit(eventName, eventArgs)
  if (ipcMain) {
    webContents.getAllWebContents().forEach((wc) => {
      wc.send('__eventPipe', { eventName, eventArgs })
    })
  } else if (ipcRenderer) {
    ipcRenderer.invoke('__eventPipe', { eventName, eventArgs, broadcast: true })
  }
}

这个方法可以把消息发送给所有进程，首先是在自己的进程上发射eventName事件，接着判断当前进程是主进程还是渲染进程，如果是主进程则给所有渲染进程发送消息，如果是渲染进程，则给主进程发送消息，给主进程发消息时，附加了broadcast标记。要求主进程给其他所有的渲染进程转发消息。

代码语言：javascript复制
emitToWebContents(wcIdOrWc: number | WebContents, eventName: string, eventArgs?: any) {
  if (ipcMain) {
    if (typeof wcIdOrWc == 'number') {
      webContents.getAllWebContents().forEach((wc) => {
        if (wc.id === wcIdOrWc) wc.send('__eventPipe', { eventName, eventArgs })
      })
    } else {
      wcIdOrWc.send('__eventPipe', { eventName, eventArgs })
    }
  } else if (ipcRenderer) {
    ipcRenderer.sendTo(wcIdOrWc as number, '__eventPipe', { eventName, eventArgs })
  }
}

这个方法把消息发送给指定的WebContents对象，如果当前进程是主进程，则找到WebContents对象，并调用它的send方法发送消息；如果当前进程是渲染进程，则使用ipcRenderer的sendTo方法发送给目标WebContents对象。

接下来还有几个注册事件和取消注册的方法

代码语言：javascript复制
  on(eventName: string, callBack: (e: any, eventArgs: any) => void) {
    this.instance.on(eventName, callBack)
  }
  once(eventName: string, callBack: (e: any, eventArgs: any) => void) {
    this.instance.once(eventName, callBack)
  }
  off(eventName: string, callBack: (e: any, eventArgs: any) => void) {
    if (callBack) {
      this.instance.removeListener(eventName, callBack)
    } else {
      this.instance.removeAllListeners(eventName)
    }
  }

这些我们就不多做解释了。

遗留问题：我们没办法通过这个组件把消息透传到子页面iframe内部

这个组件淋漓尽致的体现了那句话：把简单、幸福留给用户；把复杂、无奈留给自己；

electron 渲染 网站深入浅出Electron Electron

0 人点赞