1. 概述

再electron中，進程間的通信通過ipcMain和ipcRenderer模塊，這些通道是任意和雙向的

1.1. 什么是上下文隔離進程

ipc通道是通過預加載腳本綁定到window對象的electron對象屬性上的

2. 通信方式

2.1. ipcMain（也就是渲染進程向主進程的通信 單向）

• 如果要將渲染器進程發(fā)送的主進程，我們使用ipcRenderer.send()在渲染進程中發(fā)送信息，然后在主進程中通過ipcMain.on來接收到渲染進程所發(fā)送的信息

2.2. 渲染器進程到主進程（雙向）

• 雙向 IPC 的一個常見應用是從渲染器進程代碼調(diào)用主進程模塊并等待結(jié)果。 這可以通過將 ipcRenderer.invoke 與 ipcMain.handle 搭配使用來完成。

2.3. 主進程到渲染進程

• 將消息從主進程發(fā)送到渲染器進程時，需要指定是哪一個渲染器接收消息。 消息需要通過其 WebContents 實例發(fā)送到渲染器進程。 此 WebContents 實例包含一個 send 方法，其使用方式與 ipcRenderer.send 相同。

3. 在electron-vite腳手架中進行統(tǒng)一使用

當用electron-vite腳手架搭建完項目之后在src文件夾下有三個文件夾

他們分別是：

• main 主進程
• preload 預加載腳本
• renderer ui界面/渲染進程

3.1. ipcMain（也就是渲染進程向主進程的通信 單向）

1. 首先在main.ts中新建ipc.ts文件來寫入ipc通道和src目錄在新建common（和main文件夾同級）來綁定ipc事件信息

//我們在這個中定義ipc的事件名稱，翻遍后續(xù)的事件管理
export enum IpcEvents{SAYHELLO="sayhello"
}

//引入相關(guān)的事件名稱
import {ipcMain} from 'electron'
import {IpcEvents} from "../common/ipcEvents";//ipc事件注冊函數(shù)
const register=async ():Promise<void>=>{ipcMain.on(IpcEvents.SAYHELLO,async (e)=>{console.log('hello')})}
export default {register}

最后一步我們需要再main/index.ts主進程文件中注冊ipc通道事件

//首先引入我們的ipc文件
import ipc from './ipc'//然后我們找到這個函數(shù)
app.whenReady().then(async () => {// Set app user model id for windows......await ipc.register()   //需要注意的是我們要在這兒createWindwo()函數(shù)之前注冊ipc事件(也就是在創(chuàng)建窗口之前注冊)createWindow()......})

在渲染進程中使用

<template><div class="home"><n-button @click="clickHandler">點擊</n-button></div>
</template>
<script lang="ts" setup>
import {IpcEvents} from "../../../../../common/ipcEvents";
//在此處點擊事件
const clickHandler=()=>{window.electron.ipcRenderer.send(IpcEvents.SAYHELLO)   //此處調(diào)用事件
}
</script>
<style lang="scss" scoped>
.home{height: 100%;padding: 16px;
}
</style>

當我們點擊后發(fā)現(xiàn)控制臺出現(xiàn)相應的打印輸出后表示注冊成功

3.1.1. 如何進行傳參

• 我們在ipc通道中進行參數(shù)/數(shù)據(jù)傳遞的時候,建議使用JSON序列化

<template><div class="home"><n-button @click="clickHandler">點擊</n-button></div>
</template>
<script lang="ts" setup>
import {IpcEvents} from "../../../../../common/ipcEvents";
const datalist=[{name:"yu",age:23,sex:"男"},{name:"chao",age:23,sex:"女"},{name:"zhi",age:23,sex:"未知"},{name:"wang",age:24,sex:"男"},
]
const clickHandler=()=>{const data=JSON.stringify(datalist)window.electron.ipcRenderer.send(IpcEvents.SAYHELLO,data)
}
</script>
<style lang="scss" scoped>
.home{height: 100%;padding: 16px;
}
</style>

import {ipcMain} from 'electron'
import {IpcEvents} from "../common/ipcEvents";const register=async ():Promise<void>=>{ipcMain.on(IpcEvents.SAYHELLO,async (e,data)=>{const dataList=JSON.parse(data)console.log(dataList)})
}export default {register}

點擊后會發(fā)現(xiàn)在控制臺中中文會亂碼

electron中中文亂碼解決方案

在啟動命令之前添加chcp 65001解決electron控制臺下打印中文亂碼

    "dev": "chcp 65001 && electron-vite dev",

?

現(xiàn)在我們重新啟動項目,可以清除的看到中文不會亂碼

3.2. 主進程向渲染進程通信

我們首先在src/renderer/src下新建文件夾名hook

然后新建文件useIpcRendererOn.ts

import { onUnmounted } from 'vue'//這兒要注意引入的ipc事件的地址，然后無腦粘貼
import { IpcEvents } from '../../../common/ipcEvents'type IpcRendererListener = (event: any, ...args: any[]) => void//用于監(jiān)聽主進程向渲染進行雙向的通信
export default function useIpcRendererOn(channel: IpcEvents,listener: IpcRendererListener
): any {const ipc = (window as any).electron.ipcRendereronUnmounted(() => {ipc.removeListener(channel, listener)})return (window as any).electron.ipcRenderer.on(channel, listener)
}

重新定義新的事件名稱

//我們在這個中定義ipc的事件名稱，翻遍后續(xù)的事件管理
export enum IpcEvents{SAYHELLO="sayhello",SAYWORLD="sayworld"
}

住進程向渲染進程發(fā)送消息

import {ipcMain} from 'electron'
import {IpcEvents} from "../common/ipcEvents";const register=async ():Promise<void>=>{ipcMain.on(IpcEvents.SAYHELLO,async (e,data)=>{const dataList=JSON.parse(data)console.log(dataList)const world=JSON.stringify([{name:"這個是主進程傳遞過來的",value:1}])//在這兒向渲染進程發(fā)送信息e.sender.send(IpcEvents.SAYWORLD,world)})
}export default {register}

我們在渲染進程中來監(jiān)聽主程序的發(fā)送的數(shù)據(jù)

<template><div class="home"><n-button @click="clickHandler">點擊</n-button></div>
</template>
<script lang="ts" setup>
import {IpcEvents} from "../../../../../common/ipcEvents";
import useIpcRendererOn from "../../../hook/useIpcRendererOn";
const datalist=[{name:"yu",age:23,sex:"男"},{name:"chao",age:23,sex:"女"},{name:"zhi",age:23,sex:"未知"},{name:"wang",age:24,sex:"男"},
]
const clickHandler=()=>{const data=JSON.stringify(datalist)window.electron.ipcRenderer.send(IpcEvents.SAYHELLO,data)
}
//用來監(jiān)聽渲染進程發(fā)送的信息
useIpcRendererOn(IpcEvents.SAYWORLD,async (_,data)=>{const list=JSON.parse(data)console.log(list)
})
</script>
<style lang="scss" scoped>
.home{height: 100%;padding: 16px;
}
</style>

當我們點擊按鈕后回清晰看到在頁面的開發(fā)者工具中打印出來主進程中傳遞過來的數(shù)據(jù)

上述行為整體剖析

• 我們首先通過在頁面中進行點擊來觸發(fā)window.electron.ipcRenderer.send(IpcEvents.SAYHELLO,data)中的SAYHELLO事件
• 然后在住進程中通過 ipcMain.on(IpcEvents.SAYHELLO）接收到相對應的點擊事件并打印（打印在控制臺）
• 然后再通過e.sender.send(IpcEvents.SAYWORLD)向渲染進程發(fā)送信息
• 渲染進程通過useIpcRendererOn(IpcEvents.SAYWORLD），來監(jiān)聽SAYWORLD主進程發(fā)送的事件

由以上四步在住進程中形成了統(tǒng)一的閉環(huán)操作。

以上情況幾乎能夠完成所有的ipc通信操作，還有一種情況后續(xù)再說

3.3. 擇日不如撞日（最后一種方式）雙向奔赴

首先在ipcEvents.ts中注冊一個事件名稱

export enum IpcEvents{SAYHELLO="sayhello",SAYWORLD="sayworld",SAYTHANKYOU='Thankyou'
}

我們首先在渲染界面發(fā)送消息

<template><div class="home"><n-button @click="clickHandler">點擊</n-button><n-button @click="sayTankyouHandler">說謝謝</n-button></div>
</template>
<script lang="ts" setup>
import {IpcEvents} from "../../../../../common/ipcEvents";
import useIpcRendererOn from "../../../hook/useIpcRendererOn";
const datalist=[{name:"yu",age:23,sex:"男"},{name:"chao",age:23,sex:"女"},{name:"zhi",age:23,sex:"未知"},{name:"wang",age:24,sex:"男"},
]
const clickHandler=()=>{const data=JSON.stringify(datalist)window.electron.ipcRenderer.send(IpcEvents.SAYHELLO,data)
}
useIpcRendererOn(IpcEvents.SAYWORLD,async (_,data)=>{const list=JSON.parse(data)console.log(list)
})
const sayTankyouHandler=async ()=>{//這兒發(fā)送消息，向主進程await window.electron.ipcRenderer.invoke(IpcEvents.SAYTHANKYOU).then((data: string) => {//data便是渲染進程中然會過來的數(shù)據(jù)console.log(data)})
}
</script>
<style lang="scss" scoped>
.home{height: 100%;padding: 16px;
}
</style>

住進程中接收并返回

import {ipcMain} from 'electron'
import {IpcEvents} from "../common/ipcEvents";const register=async ():Promise<void>=>{ipcMain.on(IpcEvents.EVPLAY,async (e,data)=>{const dataList=JSON.parse(data)console.log(dataList)const world=JSON.stringify([{name:"這個是主進程傳遞過來的",value:1}])e.sender.send(IpcEvents.SAYWORLD,world)})//這個便是進行的雙向通信說謝謝ipcMain.handle(IpcEvents.SAYTHANKYOU,()=>{return '謝謝'})
}export default {register}

我們可以看見非常的有禮貌，那你呢？

值得注意的是：

• 以上操作我們都是在electron-vite的腳手架下完成的，electron-vite已經(jīng)完成了文件預加載的任務（也就是說已經(jīng)把electron的對象綁定到了window對象上）
• 如果您自己搭建electron那么需要自己創(chuàng)建預加載文件。

• 還有另外一種情況就是，我們此預加載文件是在主窗口下引入，如果新打開窗口不是主窗口那么需要在新打開窗口中重新引入預加載文件，否則Ipc通信不可使用

為了解決紅色方框的第三個問題，以示誠意貼張圖片

以上便是完整的ipc通信，說謝謝

?