electron 桌面端通信 （三）

之前，我们知道了如何快速将一个web项目转化为桌面端应用，同时也知道了针对某些行业如何添加副屏。不过，在有些场景下，可能需要通过Electron获取一些桌面端（系统）信息，传递给网页，或者副屏需要需要接收主屏传过来的数据等等场景，此时，我们就需要通过通信解决。

1、以前

以前，通过 Electron 构建的构建的项目，会在网页环境中提供 require 函数，用来加载 electron 的一些模块，进而解决一些问题，不过后面统一改成使用 IPC 通道（也保留了原有方式，不过需要简单配置下，这里不在叙述） 去实现通信。

2、理解

之前我们说过，electron 是分为主进程和渲染进程，可以简单这样理解，渲染进程就是类似浏览器，帮你渲染你指定的网页地址，主进程则是 electron 相关代码。

假设，网页需要通过 electron 获取电脑mac地址，从而完成登录，那么问题可以分为两步：

1、网页告诉主进程，我要获取mac地址
2、主进程接收到信息，获取mac地址，并返回它

也就是 渲染进程----->主进程的过程

3、渲染进程----->主进程的过程

// ======================electron 中====================================
// =========preload.js中=======

const { contextBridge, ipcRenderer } = require('electron')
// 这一步，会在 window 环境下，注册一个 testElectronAPI 对象，里面就放着你写的通信api
contextBridge.exposeInMainWorld('testElectronAPI',{
  getMacInfo: () => ipcRenderer.invoke('get-mac')
})

// =========main.js中=======
app.whenReady().then(() => {
  // 添加处理函数
  ipcMain.handle('get-mac', async function () {
  	const os = require("os")
  	const macRegex = /(?:[a-z0-9]{1,2}[:-]){5}[a-z0-9]{1,2}/i
	const zeroRegex = /(?:[0]{1,2}[:-]){5}[0]{1,2}/

  	let info = {
        mac: []
    }
    
    const list = os.networkInterfaces()
    for (const [key, parts] of Object.entries(list)) {
            if (!parts) continue
            for (const part of parts) {
                if (zeroRegex.test(part.mac) === false) {
                    info.mac.indexOf(part.mac) == -1 ? info.mac.push(part.mac) : ''
                }
            }
     }
    return info
  })
 ...
})

// 这一步，就完成了在主进程中，事件的注册，那么接下来就是在渲染进程中触发了

// ======================网页中====================================

btn.addEventListener('click', async () => {
  const res = await window.electronAPI.getMacInfo()
 ....
})

上述是比较推荐的做法，在Electron 7 之前，也可以采用 send、sendSync两种方式，不过这两种性能不是很好，尤其是 sendSync 同步方法，必须等到返回信息，如果一直没返回，容易造成卡死

4、假如我是要与副屏通信呢？

上面我们是解决了 渲染进程----->主进程 的问题，对于副屏这种问题其实就是 渲染进程(主) ----> 主进程----->渲染进程(副)，人话就是：

1、主屏告诉 electron，我这里有个副屏的快递，我先给你
2、electron 拿到快递，告诉副屏，你的快递
3、副屏，拿到快递了

上面这个例子可以知道，相当于 electron 只是在充当了一次中转的角色，把主屏的内容，交给了副屏

这里可以联合运用
渲染器进程到主进程（单向）+ 主进程到渲染器进程

以下为，将主屏中的购物车信息，同步到副屏中

// 实现 渲染器进程到主进程（单向）

// =========== 老规矩 electron 中 ===========
// preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('mainScreen', {
    setViceGoods: (data) => ipcRenderer.send('set-goods', data)
})
// main.js
ipcMain.on('set-goods', (event, data) => {
	// viceWindow 为副屏窗口
    viceWindow.webContents.send('update-goods-msg', data)
 })
 // 主屏传递
 window.mainScreen.setViceGoods(goodsData)


// 副屏注册事件 
// 副屏的 preload.js 
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('viceScreen', {
    onGoods: (callback) => ipcRenderer.on('update-goods-msg', callback)
})

// 副屏网页中
// 可以理解为注册了一个回调函数
window.viceScreen.onGoods((event, data) => {
    console.log('传递过来的数据',data)
})

简单介绍了常用的几种通信方式，如有更多需求，可参考文档（链接）