最近主要在做一个基于electron实现的客户端项目，项目的基础功能已经搭建完成，目前在不断的完善优化和增添新功能，打算对这个项目中用到的一些技术和知识点进行一下总结。

首先，我是一名前端工程师，之前没有开发客户端的经验，但是electron让这些成为了可能，让前端可以只通过js就能写出客户端(虽然有点大)。这个项目大概是去年下半年开始的，最开始接触的时候觉得electron的官网api文档还是比较友好的，而且也有了很多成熟的项目(比如对于前端童鞋来说很熟悉的vs code)，也比较稳定了。但开发过程中还是遇到很多的坑，有一些个别问题至今仍没有特别好的解决方案，在后续的文章里陆续介绍。今天先讲一下electron进程之间的通讯，主进程与渲染进程之间的通讯是很重要的一环，像我们的项目嵌套了很多的webview，还需要渲染进程与webview通讯等等。

主进程与渲染进程同步以及异步通讯

// 在主进程中
const {ipcMain} = require('electron')

ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg)  // 打印 "渲染进程向主进程异步发送信息"
  event.sender.send('asynchronous-reply', '主进程向渲染进程异步发送信息')
})

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg)  // 打印 "渲染进程向主进程同步发送信息"
  event.returnValue = '主进程向渲染进程同步发送信息'
})

// 在渲染进程中
const {ipcRenderer} = require('electron')

console.log(ipcRenderer.sendSync('synchronous-message', '渲染进程向主进程同步发送信息')) 
// 打印 "主进程向渲染进程同步发送信息"

ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // 打印 "主进程向渲染进程异步发送信息"
})

ipcRenderer.send('asynchronous-message', '渲染进程向主进程异步发送信息')

渲染进程与嵌套的webview通讯

const webview = document.querySelector('webview')

webview.addEventListener('ipc-message', (event) => {
  console.log(event.channel)
  // 打印 "helloipc"
  console.log(event.args[0])
  // 打印 "你也好啊"
})

webview.send('hellowebview','你好啊')

const {ipcRenderer} = require('electron')

ipcRenderer.on('hellowebview', (event,msg) => {
  console.log(msg)
  // 打印 "你好"
  ipcRenderer.sendToHost('helloipc','你也好啊')
})