electron-vite中的ipc通信

1. 概述

再electron中，进程间的通信通过ipcMain和ipcRenderer模块，这些通道是任意和双向的

1.1. 什么是上下文隔离进程

ipc通道是通过预加载脚本绑定到window对象的electron对象属性上的

2. 通信方式

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

  • 如果要将渲染器进程发送的主进程，我们使用ipcRenderer.send()在渲染进程中发送信息，然后在主进程中通过ipcMain.on来接收到渲染进程所发送的信息

2.2. 渲染器进程到主进程（双向）

  • 双向 IPC 的一个常见应用是从渲染器进程代码调用主进程模块并等待结果。 这可以通过将 ipcRenderer.invoke 与 ipcMain.handle 搭配使用来完成。

2.3. 主进程到渲染进程

  • 将消息从主进程发送到渲染器进程时，需要指定是哪一个渲染器接收消息。 消息需要通过其 WebContents 实例发送到渲染器进程。 此 WebContents 实例包含一个 send 方法，其使用方式与 ipcRenderer.send 相同。

3. 在electron-vite脚手架中进行统一使用

当用electron-vite脚手架搭建完项目之后在src文件夹下有三个文件夹

他们分别是：

  • main 主进程
  • preload 预加载脚本
  • renderer ui界面/渲染进程

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

  1. 首先在main.ts中新建ipc.ts文件来写入ipc通道和src目录在新建common（和main文件夹同级）来绑定ipc事件信息

//我们在这个中定义ipc的事件名称，翻遍后续的事件管理
export enum IpcEvents{SAYHELLO="sayhello"
}

//引入相关的事件名称
import {ipcMain} from 'electron'
import {IpcEvents} from "../common/ipcEvents";//ipc事件注册函数
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'//然后我们找到这个函数
app.whenReady().then(async () => {// Set app user model id for windows......await ipc.register()   //需要注意的是我们要在这儿createWindwo()函数之前注册ipc事件(也就是在创建窗口之前注册)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)   //此处调用事件
}
</script>
<style lang="scss" scoped>
.home{height: 100%;padding: 16px;
}
</style>

当我们点击后发现控制台出现相应的打印输出后表示注册成功

3.1.1. 如何进行传参

  • 我们在ipc通道中进行参数/数据传递的时候,建议使用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}

点击后会发现在控制台中中文会乱码

electron中中文乱码解决方案

在启动命令之前添加chcp 65001解决electron控制台下打印中文乱码

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

 

现在我们重新启动项目,可以清除的看到中文不会乱码

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//用于监听主进程向渲染进行双向的通信
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的事件名称，翻遍后续的事件管理
export enum IpcEvents{SAYHELLO="sayhello",SAYWORLD="sayworld"
}

住进程向渲染进程发送消息

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}])//在这儿向渲染进程发送信息e.sender.send(IpcEvents.SAYWORLD,world)})
}export default {register}

我们在渲染进程中来监听主程序的发送的数据

<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)
}
//用来监听渲染进程发送的信息
useIpcRendererOn(IpcEvents.SAYWORLD,async (_,data)=>{const list=JSON.parse(data)console.log(list)
})
</script>
<style lang="scss" scoped>
.home{height: 100%;padding: 16px;
}
</style>

当我们点击按钮后回清晰看到在页面的开发者工具中打印出来主进程中传递过来的数据

上述行为整体剖析

  • 我们首先通过在页面中进行点击来触发window.electron.ipcRenderer.send(IpcEvents.SAYHELLO,data)中的SAYHELLO事件
  • 然后在住进程中通过 ipcMain.on(IpcEvents.SAYHELLO）接收到相对应的点击事件并打印（打印在控制台）
  • 然后再通过e.sender.send(IpcEvents.SAYWORLD)向渲染进程发送信息
  • 渲染进程通过useIpcRendererOn(IpcEvents.SAYWORLD），来监听SAYWORLD主进程发送的事件

由以上四步在住进程中形成了统一的闭环操作。

以上情况几乎能够完成所有的ipc通信操作，还有一种情况后续再说

3.3. 择日不如撞日（最后一种方式）双向奔赴

首先在ipcEvents.ts中注册一个事件名称

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

我们首先在渲染界面发送消息

<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 ()=>{//这儿发送消息，向主进程await window.electron.ipcRenderer.invoke(IpcEvents.SAYTHANKYOU).then((data: string) => {//data便是渲染进程中然会过来的数据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已经完成了文件预加载的任务（也就是说已经把electron的对象绑定到了window对象上）
  • 如果您自己搭建electron那么需要自己创建预加载文件。
  • 还有另外一种情况就是，我们此预加载文件是在主窗口下引入，如果新打开窗口不是主窗口那么需要在新打开窗口中重新引入预加载文件，否则Ipc通信不可使用

为了解决红色方框的第三个问题，以示诚意贴张图片

以上便是完整的ipc通信，说谢谢

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/635567.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

R303 指纹识别模块硬件接口说明

R303 指纹识别模块硬件接口说明

1.外部接口尺寸图 2.USB通讯 3.串行通讯
阅读更多...
修改大型二进制库内部函数名的bash 脚本及其解释

修改大型二进制库内部函数名的bash 脚本及其解释

1.大型lib库重命名函数名字 迭代的方式对于大型二进制库改名字的功能脚本 会将源文件中的函数 add_(...) 修改成 nubia_add_(...) 的方式来调用 此脚本分配来修改&#xff0c;可以避免突破资源限制 ulimit -a&#xff1b; 保存为&#xff1a;redef_func_name_01.sh chmod…
阅读更多...
VUE组件--动态组件、组件保持存活、异步组件

VUE组件--动态组件、组件保持存活、异步组件

动态组件 有些场景可能会需要在多个组件之间进行来回切换&#xff0c;在vue中则使用<component :is"..."> 来实现组件间的来回切换 // App.vue <template><component :is"tabComponent"></component><button click"change…
阅读更多...
第4周：Pytorch——综合应用和实战项目 Day 28-30: 学习资源和社区参与

第4周：Pytorch——综合应用和实战项目 Day 28-30: 学习资源和社区参与

第4周&#xff1a;综合应用和实战项目 Day 28-30: 学习资源和社区参与 在这个阶段&#xff0c;我们将探索更多的学习资源并鼓励参与PyTorch和TensorFlow的社区&#xff0c;以进一步提升技术和融入开发者社群。 学习资源&#xff1a; 论文&#xff1a;阅读最新的机器学习和深度…
阅读更多...
【实战教程】ThinkPHP6分页功能轻松实现，让你的网站更高效！

【实战教程】ThinkPHP6分页功能轻松实现，让你的网站更高效！

ThinkPHP是一款非常流行的PHP开发框架&#xff0c;其最新版本ThinkPHP6在性能和易用性方面都得到了很大的改善。分页功能是网页开发中非常常见的功能&#xff0c;而ThinkPHP6也提供了非常方便的分页方法。本文将介绍如何实现ThinkPHP6的分页功能。 一、了解分页功能 在Web应用…
阅读更多...
Spring FactoryBean

Spring FactoryBean

FactoryBean 是 Spring 框架中的一个高级接口&#xff0c;用于声明一个 Spring bean&#xff0c;它本身作为一个工厂可以创建其他的对象。这个机制常用于框架集成&#xff0c;例如用来创建复杂的第三方库实例&#xff0c;或者创建需要大量配置的对象。 实现 FactoryBean 接口的…
阅读更多...
【JavaEE进阶】 SpringBoot配置⽂件

【JavaEE进阶】 SpringBoot配置⽂件

文章目录 &#x1f340;配置⽂件的作⽤&#x1f334;SpringBoot配置⽂件&#x1f38b;配置⽂件的格式&#x1f384;properties配置⽂件&#x1f6a9;properties基本语法&#x1f6a9;读取配置⽂件&#x1f6a9;properties的缺点 &#x1f333;yml配置⽂件yml基本语法&#x1f6…
阅读更多...
TestCaseAssiant使用说明

TestCaseAssiant使用说明

目录 说明 工具界面 功能描述 Xmind转测试用例 测试组件 测试用例 用例优先级 用例前提 用例操作步骤 用例期望结果 Excel测试用例转Testlink xml 用例模板 使用技巧: TestLink Xml转Excel测试用例 说明 本文为小编之前博文中介绍的工具使用说明 Xmind转Excel测…
阅读更多...
【亲测解决】Timedelta is not defined

【亲测解决】Timedelta is not defined

问题 今天编写Python代码&#xff0c;出现问题如下&#xff1a; Timedelta is not defined解决方案 from datetime import timedelta1、参考&#xff0c; https://stackoverflow.com/questions/16782682/timedelta-is-not-defined
阅读更多...
uniapp 小程序 使用 new FormData 报错，is not defined 问题解决（没解决）

uniapp 小程序 使用 new FormData 报错，is not defined 问题解决（没解决）

new FormData 只适用于web端&#xff0c;uniapp 小程序不适用&#xff0c;这里当时也卡了一下&#xff0c;随便用个js文件发现其实FormData也使用不了&#xff0c;所以如果要配置formData 的格式 无法使用FormData,会报 FormData is not defined. 解决 原文 原文 原文 1.安装…
阅读更多...
python tkinter 最简洁的计算器按钮排列

python tkinter 最简洁的计算器按钮排列

代码如下&#xff0c;只要再加上按键绑定事件函数&#xff0c;计算器既可使用了。 import tkinter as tk from tkinter.ttk import Separator,Buttonif __name__ __main__:Buttons [[%,CE,C,←],[1/x,x,√x,],[7, 8, 9, x],[4, 5, 6, -],[1, 2, 3, ],[, 0, ., ]]root tk.T…
阅读更多...
MySQL作业 （4） 数据表综合练习

MySQL作业 （4） 数据表综合练习

数据表综合练习 题目&#xff1a;1.查询" 01 "课程比" 02 "课程成绩高的学生的信息及课程分数1.1查询同时存在" 01 "课程和" 02 "课程的情况1.2查询存在" 01 "课程但可能不存在" 02 "课程的情况(不存在时显示为 n…
阅读更多...
2024年阿里云优惠券和代金券领取，活动整理服务器价格表

2024年阿里云优惠券和代金券领取，活动整理服务器价格表

2024阿里云优惠活动&#xff0c;免费领取阿里云优惠代金券&#xff0c;阿里云优惠活动大全和云服务器优惠价格表&#xff0c;阿里云ECS服务器优惠价99元一年起&#xff0c;轻量服务器优惠价61元一年&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云优惠券免费领取、优惠活…
阅读更多...
智能数据采集网关如何助力制造企业生产提效

智能数据采集网关如何助力制造企业生产提效

随着工业4.0的推进&#xff0c;制造业正面临着一场数据革命。某高端制造企业为了提高生产效率、降低运营成本&#xff0c;决定引入智能数据采集网关&#xff0c;以实现生产过程的智能化管理。 该高端制造企业主要从事精密机械零件的生产。在传统生产模式下&#xff0c;生产过程…
阅读更多...
Python算法题集_字母异位词分组

Python算法题集_字母异位词分组

本文为Python算法题集之一的代码示例 题目49&#xff1a;字母异位词分组 说明&#xff1a;给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起&#xff0c;可以按任意顺序返回结果列表 字母异位词 &#xff1a;是由重新排列原单词所有字母得到的新单词 使用同步数…
阅读更多...
GCC 内联汇编

GCC 内联汇编

LINUX下的汇编入门 AT&T风格 汇编 和GCC风格汇编 汇编代码的调试 前面写了三篇,是自我摸索三篇,摸着石头过河,有些或许是错误的细节,不必在意! 今天我们直接用GCC编译C语言代码,且在C语言里面内嵌AT&T风格的汇编! 前三篇大家了解即可,我们重点放在内嵌汇编里,简单快…
阅读更多...
Java设计模式-单例模式（2）

Java设计模式-单例模式（2）

大家好&#xff0c;我是馆长&#xff01;从今天开始馆长开始对java设计模式的创建型模式中的单例、原型、工厂方法、抽象工厂、建造者的单例模式进行讲解和说明。 单例模式&#xff08;Singleton&#xff09; 定义 某个类只能生成一个实例&#xff0c;该类提供了一个全局访问…
阅读更多...
AI如何助力制造业变革？

AI如何助力制造业变革？

当前&#xff0c;制造业企业正在转型发展&#xff0c;发力智能制造&#xff0c;以实现降低成本、提高效率和提高客户满意度的目标。这其中人工智能&#xff08;AI&#xff09;被认为是最重要的一项技术。AI技术可以优化制造流程&#xff0c;大大提高生产力&#xff0c;帮助企业…
阅读更多...
houdini rnn

houdini rnn

1.3.RNN模型_哔哩哔哩_bilibili 此公式来自于吴恩达P1.3视频 按公式推测rnn内部结构,如有错误&#xff0c;敬请指正
阅读更多...
【话题】边缘计算的挑战和机遇

【话题】边缘计算的挑战和机遇

边缘计算是一种新的计算范式&#xff0c;其核心是在网络边缘处理数据&#xff0c;而不是传统的中心式云计算模式。这种计算方式的兴起得益于物联网&#xff08;IoT&#xff09;的普及和丰富的云服务的成功。 机遇&#xff1a; 响应时间优化&#xff1a;由于数据处理更接近数据…
阅读更多...
最新文章

Copyright @ 2022~2023