引入
electron項(xiàng)目常常由一個(gè)主進(jìn)程和多個(gè)渲染進(jìn)程構(gòu)成，渲染進(jìn)程之間是隔離的，而所有渲染進(jìn)程都和主進(jìn)程共享資源。
- 所有的渲染進(jìn)程都是由主進(jìn)程創(chuàng)建的
- 每個(gè)窗口都對(duì)應(yīng)著一個(gè)渲染進(jìn)程
- 所有的渲染進(jìn)程共享一個(gè)主進(jìn)程
我們主進(jìn)程與渲染進(jìn)程交互，渲染進(jìn)程與渲染進(jìn)程交互【多窗口交互】，都需要借助ipc通信來實(shí)現(xiàn)
封裝加載進(jìn)度顯示，新建窗口 演示主進(jìn)程與渲染進(jìn)程通信
demo項(xiàng)目地址
官方ipc進(jìn)程通信講解教程
electron官方文檔ipc通信
IPC通信[主/渲染]進(jìn)程對(duì)應(yīng)
| 方向 | 主進(jìn)程【ipcMain】 | 渲染進(jìn)程【ipcRenderer】 |
|---|---|---|
| 渲染=>主 【同步/異步】 | ipcMain.on() | ipcRender.send() / ipcRender.sendSync() 【同步取值】 |
| 渲染=>主 【異步】 | ipcMain.handle() | ipcRender.invoke() |
| 主=>渲染 【異步】 | BrowserWindow【實(shí)例】.webContents.send() | ipcRender.on() |
渲染進(jìn)程=>主進(jìn)程
代碼測試
1.我們創(chuàng)建一個(gè)ipc測試文件，ipcDemo.ts
- electron\main\ipcDemo.ts
- 注意：按官方文檔來看，sendSync和handle中的return，是屬于雙向通信，這里為了方便演示同步/異步，直接拿他們來做演示，其實(shí)實(shí)際使用看來，只要不返回值，完全也可以當(dāng)做單向通信
import { ipcMain } from "electron";
export const initIpcDemo = () => {
// 同步處理通信，并等待主進(jìn)程返回值
ipcMain.on("event-on-test", (e, data: string) => {
setTimeout(() => {
e.returnValue = "主進(jìn)程同步響應(yīng)：" + data;
}, 2000);
});
// 異步處理通信，異步返回結(jié)果
ipcMain.handle("event-handle-test", (e, data: string) => {
return "主進(jìn)程異步響應(yīng):" + data;
});
// 異步處理一次
ipcMain.handleOnce("event-handleOnce-test", (e) => {
console.log("異步通信處理一次！");
});
};
2.接著我們?cè)趀lectron的入口文件中引入
- electron\main\index.ts
import {initIpcDemo} from './ipcDemo'
// 初始化ipc通信Demo
initIpcDemo();
3.我們創(chuàng)建一個(gè)ipcDemo的.vue文件，測試渲染進(jìn)程=>主進(jìn)程的單向通信：
- src\components\demo\ipcDemo.vue
<template>
<div>
<go-back></go-back>
<ul>
<li><el-button @click="eventOnTest">同步通信測試</el-button></li>
<li><el-button @click="eventHandleTest">異步通信測試</el-button></li>
<li><el-button @click="eventHandleOnceTest">異步通信一次</el-button></li>
</ul>
</div>
</template>
<script setup lang="ts">
import { ipcRenderer } from "electron";
import { onMounted, onUnmounted } from "vue";
// 同步通信測試
function eventOnTest() {
const result = ipcRenderer.sendSync("event-on-test", "狼來了");
console.log(result);
}
// 異步通信測試
function eventHandleTest() {
ipcRenderer.invoke("event-handle-test", "小龍你好").then((res) => {
console.log(res);
});
}
// 異步通信一次
function eventHandleOnceTest() {
ipcRenderer.invoke("event-handleOnce-test");
}
</script>
<style scoped lang="scss"></style>
4.補(bǔ)充對(duì)應(yīng)的頁面路由后，我們看一下測試結(jié)果
測試效果
主進(jìn)程=>渲染進(jìn)程
代碼測試
1.我們?cè)谥鞔翱诔跏蓟戤叺牡胤窖a(bǔ)充代碼邏輯，創(chuàng)建一個(gè)定時(shí)器每隔兩秒向渲染進(jìn)程發(fā)送消息
- electron\main\index.ts
let number = 1;
setInterval(() => {
if (win && win.webContents) {
win.webContents.send("event-from-main", "計(jì)數(shù)" + number++);
}
}, 2000);
2.渲染進(jìn)程補(bǔ)充監(jiān)聽：
+src\components\demo\ipcDemo.vue
<script setup lang="ts">
onMounted(()=>{
ipcRenderer.on("event-from-main",eventFromMain);
});
// 來自主進(jìn)程的消息
function eventFromMain(e:any,data:string){
console.log("監(jiān)聽到消息",data)
}
onUnmounted(()=>{
ipcRenderer.removeListener("event-from-main",eventFromMain);
});
</script>
測試效果
雙向通信
按官方文檔來看，主進(jìn)程handle并return，渲染進(jìn)程用promise語法，或主進(jìn)程on并e.returnValue，渲染進(jìn)程用sendSync就是雙向通信
這里我個(gè)人認(rèn)為多窗口間的雙向通信適合用下面的寫法，上面的寫法在渲染進(jìn)程=>主進(jìn)程中已經(jīng)演示，故不贅述，這里主要演示下下面的使用
代碼測試
1.主進(jìn)程補(bǔ)充邏輯，在收到渲染進(jìn)程的調(diào)用后，主動(dòng)給渲染進(jìn)程的窗口發(fā)送消息
- electron\main\ipcDemo.ts
import { ipcMain } from "electron";
export const initIpcDemo = () => {
// 雙向通信處理
ipcMain.handle("event-handle-togeter-test", (e, data: string) => {
e.sender.send("event-handle-togeter-test", "主進(jìn)程通知" + data);
});
};
2.測試代碼補(bǔ)充邏輯文章來源：http://www.zghlxwxcb.cn/news/detail-687551.html
- src\components\demo\ipcDemo.vue
<template>
<div>
<ul>
<li>
<el-button @click="eventHandleTogeterTestClick">雙向通信</el-button>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { ipcRenderer } from "electron";
import { onMounted, onUnmounted } from "vue";
onMounted(()=>{
ipcRenderer.on("event-handle-togeter-test",eventHandleTogeterTest);
});
function eventHandleTogeterTestClick(){
ipcRenderer.invoke("event-handle-togeter-test","奧利給");
}
// 雙向通信測試
function eventHandleTogeterTest(e:any,data:string) {
console.log("渲染進(jìn)程監(jiān)聽到：",data);
}
onUnmounted(()=>{
ipcRenderer.removeListener("event-handle-togeter-test",eventHandleTogeterTest);
});
</script>
<style scoped lang="scss"></style>
測試效果
- 這里我們可以思考一下，假如我需要點(diǎn)擊一個(gè)窗口的按鈕，通知另一個(gè)窗口操作，就可以利用雙向通信，將另一個(gè)窗口的id傳遞給主進(jìn)程以及對(duì)應(yīng)的消息，主進(jìn)程通過窗口id找到對(duì)應(yīng)窗口，然后主動(dòng)通知窗口進(jìn)行對(duì)應(yīng)操作
文章來源地址http://www.zghlxwxcb.cn/news/detail-687551.html
到了這里，關(guān)于electron+vue3全家桶+vite項(xiàng)目搭建【13.1】ipc通信的使用，主進(jìn)程與渲染進(jìn)程之間的交互的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
