electron渲染进程之间的通讯ipcRendere

这阵子用 electron 做桌面小应用，一开始觉得挺好玩的可以做桌面应用，后来发现这个框架的坑比较多，而且还挺深

介于 electron 的文档有时候表达不清晰（不够人性吧），有时候找问题比较麻烦，比如全局变量还有进程通讯的问题

在做这个应用之间的信息通讯的时候发现了一个很恐怖的问题，就是

全局变量、同一JS变量集、同一JSON数据集，都并不能做到应用通讯！

你会发现不同进程之间，全局变量和导入的变量集，都是区分开的，一方修改，另一方却是原封不动。要实现进程间的通讯，要依靠下面的这个概念

先说一下 electron 的进程概念

electron 的进程分为 主进程 和 渲染进程

main.js为主进程
你在入口文件的index.js创建的 BrowserWindow 些为渲染进程

这两者的通讯可以说是互相关联，也可以说不关联，是处于分支型

所以渲染进程之间是无法直接通讯！

不过可以通过主程序互相发送

		  	  主进程
		  ↙ 	↓	  ↘
	   ↙		↓		 ↘
	↙			↓	  		↘
渲染进程1	渲染进程2	  渲染进程3

主进程可以和渲染进程互相通讯

可以通过 electron 的 ipcMain 和 ipcRenderer 进行主进程和渲染进程之间的通讯

页面向主程序发消息

// 某个vue页面

// 这里的 ipcRenderer 在 main.js 导入的 electron 已经有，所以可以直接调用
this.$electron.ipcRenderer.send('window-close') // 发送命令
this.$electron.ipcRenderer.send('asynchronous-message', '顶你个肺') // 发送消息

// 在 生命周期 mounted 里设置好 ipcRenderer.on 准备接住主进程相应的消息
  mounted() {
    this.$electron.ipcRenderer.on('asynchronous-reply', function (event, arg) {
      // 接收到Main进程返回的消息
      var message = `异步消息回复: ${arg}`
      console.log('reply-message---:', message) // 异步消息回复: 顶你个肺
    })
  },

// 主进程
import { ipcMain,... } from 'electron'

// 接收页面发送过来的命令
ipcMain.on('window-close', function() {
  mainWindow.destroy() // 名为 mainWindow 的进程关闭
})

// 发送给进程消息
ipcMain.on('asynchronous-message', (event, arg) => {
  // event 为当前进程，arg 为接受到的消息
  event.sender.send('asynchronous-reply', arg) // 返回当前进程消息：'顶你个肺'
}

渲染进程之间的互相通讯

渲染进程之间是不可以直接通讯的！可以通过主进程做桥梁

刚刚的 ipcMain.on('asynchronous-message', (event, arg) => { 接收当前进程的消息并返回，其实在返回消息这里可以动手脚，不用 event.sender.send()

// 渲染进程 settingWindow
// 发送信息
this.$electron.ipcRenderer.send('asynchronous-message', '顶你个肺')

// 主进程
ipcMain.on('asynchronous-message', (event, arg) => {
  // event.sender.send('asynchronous-reply', arg) // 返回当前进程消息：'顶你个肺'

  // 指定另一个渲染进程接收 ，这里的目标进程：mainWindow 
  mainWindow.webContents.send('asynchronous-reply', arg) // 返回一个'顶你个肺'
})

// 渲染进程 mainWindow 
  mounted() {
    this.$electron.ipcRenderer.on('asynchronous-reply', function (event, arg) {
      // 接收到Main进程返回的消息
      var message = `接收的消息回复: ${arg}`
      console.log('reply-message---:', message)
    })
  },