electron进程间通信-IPC通信注册机制

👨 作者简介：大家好，我是Taro，全栈领域创作者

✒️ 个人主页：唐璜Taro

🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

文章目录

前言
一、通信流程
二、使用步骤
- [2.1 预加载脚本(preload.js)部分](#2.1 预加载脚本(preload.js)部分)
- [2.2 渲染进程(render.js)部分](#2.2 渲染进程(render.js)部分)
- [2.3 通信流程](#2.3 通信流程)
- [2.4 函数调用顺序](#2.4 函数调用顺序)
三、ipcRenderer.on注册机制
- [3.1 必要前提条件](#3.1 必要前提条件)
- [3.2 错误情况举例](#3.2 错误情况举例)
- [3.3 正确顺序验证](#3.3 正确顺序验证)
四、梳理正确的定义和调用顺序
- [4.1 代码层面验证](#4.1 代码层面验证)
- [4.2 关键顺序原则：](#4.2 关键顺序原则：)
总结

前言

在上一篇 electron进程间通信-从主进程到渲染器进程只是简单叙述了代码的操作流程，这篇文章我们将从代码层面开始剖析，全面了解IPC通信的注册流程

提示：以下是本篇文章正文内容，下面案例可供参考

一、通信流程

主进程通过win.webContents.send('mainProcessMessage', message)发送消息
预加载脚本通过ipcRenderer.on('mainProcessMessage', callback)接收
渲染进程通过window.electron.mainProcessMessage(callback)注册回调

二、使用步骤

2.1 预加载脚本(preload.js)部分

c 复制代码

mainProcessMessage: (callback) => {
  ipcRenderer.on('mainProcessMessage', (event, message) => callback(message))
}

这里定义了一个名为mainProcessMessage的方法，它接收一个回调函数callback
当主进程发送'mainProcessMessage'事件时，ipcRenderer.on会监听这个事件
收到事件后，提取message参数并调用callback(message)

2.2 渲染进程(render.js)部分

代码如下（示例）：

c 复制代码

window.electron.mainProcessMessage((message) => {
  console.log('收到主进程消息:', message)
  const timeDiv = document.getElementById('time')
  timeDiv.textContent = `${message}`
})

调用window.electron.mainProcessMessage并传入一个回调函数
这个回调函数会在主进程消息到达时被触发
回调函数接收message参数，更新页面上的timeDiv元素

2.3 通信流程

bash 复制代码

主进程(main.js) --发送消息--> 预加载进程(preload.js) --转发消息--> 渲染进程(render.js)

2.4 函数调用顺序

(1) 主进程调用win.webContents.send('mainProcessMessage', '消息内容')

(2) 预加载脚本的ipcRenderer.on监听到事件

(3)预加载脚本调用之前注册的callback函数

(4)渲染进程的回调函数被执行，更新页面

三、ipcRenderer.on注册机制

ipcRenderer.on监听注册必须早于主进程发送消息，这是IPC通信的基本要求。具体时序应该是（了解这一点很重要）

3.1 必要前提条件

预加载脚本先定义window.electron.mainProcessMessage方法
渲染进程调用该方法注册监听器（ipcRenderer.on）
之后主进程才能成功发送消息

3.2 错误情况举例

bash 复制代码

// 错误顺序！消息会丢失
win.webContents.send('mainProcessMessage', "Hello") // 先发送
window.electron.mainProcessMessage(() => {})         // 后监听

3.3 正确顺序验证

在项目中，main.js的这部分代码保证了正确时序：

bash 复制代码

app.on('ready', () => {
  const win = createWindow() // 先创建窗口（加载preload.js和render.js）
  // 渲染进程已准备好监听后...
  win.webContents.send('mainProcessMessage', new Date().toLocaleString()) // 后发送
})

四、梳理正确的定义和调用顺序

4.1 代码层面验证

bash 复制代码

// preload.js（定义阶段）
contextBridge.exposeInMainWorld('electron', {
  mainProcessMessage: (callback) => { 
    // 这里只是方法定义，未被调用
    ipcRenderer.on('mainProcessMessage', callback) 
  }
})

// render.js（调用阶段）
window.electron.mainProcessMessage((msg) => { 
  // 此时才真正执行ipcRenderer.on !
})

4.2 关键顺序原则：

总结

以上就是今天要讲的内容，本文仅仅简单介绍了从主进程到渲染器进程的使用，从代码层面验证了监听注册必须早于消息发送。