Electron+React进行通信的方法

2024-08-30 13:24:04

1.前言：

Electron是使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序

项目的技术栈为：Electron + React Hooks + typescript

2.一些理解：

这个项目分为三层，react(渲染层，前端)、electron(中台，可以使用nodejs的一些基本系统功能，接收后端的数据给渲染层，将渲染层的请求给后端)-后端(处理数据，发送接收数据)

和正常的前后端分离不一样的是，多出了一个electron,而electron其实就是在react和后端之间的通信桥梁，后端接口先到electron，再通过electron通信给react，反之也是一样

electron其实是一个桌面应用程序，不是一个标准的前端web程序，所有没有什么请求的发生，控制台network看不到请求，而是只能通过console.log去打印查看，而且通信协议使用的不是http而是gRPC协议

3.数据交互

以下三张图截取自Electron官网，在项目中使用非常频繁，且很重要

4.前后端交互

electron提供了ipcMain和ipcRenderer两个类进行通信。

前端发送请求：

其中 channel可以理解为调用的方法名，需要后端对该方法进行监听。

const {ipcRenderer} = window.require('electron')
ipcRenderer.send(channel, data)

后端接受请求：

const { ipcMain } = electron
ipcMain.on(channel, (event, arg) => {
  # do something here
})

反过来：

后端发送请求：

其中mainWindow为项目启动时创建的窗口，如果创建了多个窗口，可以向指定的窗口发送请求。

mainWindow.webContents.send(channel, data)

前端监听请求

const {ipcRenderer} = window.require('electron')
ipcRenderer.on(channel, (event, arg) => {
  # do something here
})

5.一些代码举例：

这是electron的文件用于向react通信，可以看到主要使用的是ipcMain这个对象

const { ipcMain } = require("electron")

module.exports = (win, getClient) => {

    ipcMain.handle("QueryYakScript", async (e, params) => {
        return await asyncQueryYakScript(params)
    })

    ipcMain.handle("DeleteYakScriptExecResult", async (e, params) => {
        return await asyncDeleteYakScriptExecResult(params)
    })
}

这是react的文件用于和electron通信，可以看到主要使用的是ipcRenderer这个对象，你会发现前后端没有直接交互，而均是通过electron这个“中间人”

 ipcRenderer.on(errorChannel, (e: any, error: any) => {
            setError(error)
        })
        ipcRenderer.on(endChannel, (e: any, data: any) => {
            info("模块加载完成 / 执行完毕")
            setExecuting(false)
            updateTasks()
        })

这是electron和后端通信的接口

到此这篇关于Electron+React如何进行通信的文章就介绍到这了,更多相关Electron React通信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

React数据传递之组件内部通信的方法

1. 概述脱离初级前端一段时间后会发现,写样式的时间越来越少,处理数据的时间越来越多.处理数据的过程也就是实现业务逻辑的过程,这在项目中无疑是最重要的. 所以学习前端框架,了解完基本语法后,接下来就要学习其如何进行数据传递. Angular 设计之初的一大亮点就是实现了数据的双向绑定,使用 Vue 一段时间后发现,所谓数据的双向绑定,组件内部唯一的应用场景就是 form 表单(input,textarea,select, radio),而这种场景下的数据双向绑定,即便框架内部没有实现,自己实现
Electron进程间通信的实现

目录主进程与渲染进程之间通信 ipc模块 + window.webContents remote模块渲染进程之间通信使用Electron开发出来的桌面应用都是多进程的,其中包含了一个主进程(Main)和至少一个渲染进程(Renderer). 主进程控制整个应用的生命周期,通过electron中的一些模块与GUI交互,同时控制每一个渲染进程. 渲染进程会在BrowserWindow对象创建出的窗口中渲染出Web页面,每个渲染页面都运行在独立的进程中. 主进程与渲染进程之间通信 ipc模块 +
详解React中组件之间通信的方式

一.是什么我们将组件间通信可以拆分为两个词: 组件通信回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想相比vue,React的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信组件间通信即指组件通过某种方式来传递信息以达到某个目的二.如何通信组件传递的方式有很多种,根据传送者和接收者可以分为如下: 父组件向子组件传递子组件向父组件传
详解React中的组件通信问题

引入本来我是没想过总结这些东西的,会感觉比较入门.但是之前同学去腾讯面试问到了这个问题(react或vue的组件通信),我帮他整理,顺便写demo的过程中,会有一些新的体会,多总结还是有利于进步的呀. 父子组件父 → 子 parent组件传给child组件,符合react的单向数据流理念,自上到下传递props. // 父组件 class Parent extends Component { constructor() { super(); this.state = { value: '',
详解React native全局变量的使用(跨组件的通信)

RN中有两种方式使用全局变量 1.通过导入导出文件的方式新建constants.js文件 const object = { website:'http://www.hao123.com', name:'好123', }; export default object; 需要用到的时候导入文件 import constants from './constansts.js' <Text>{constants.name}</Text> 还可以有另外一种导入文件的写法 export def
Electron+React进行通信的方法

目录 1.前言: 2.一些理解: 3.数据交互 4.前后端交互 5.一些代码举例: 1.前言: Electron是使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序项目的技术栈为:Electron + React Hooks + typescript 2.一些理解: 这个项目分为三层,react(渲染层,前端).electron(中台,可以使用nodejs的一些基本系统功能,接收后端的数据给渲染层,将渲染层的请求给后端)-后端(处理数据,发送接收数据) 和正常的前后端分
Android React Native原生模块与JS模块通信的方法总结

Android React Native原生模块与JS模块通信的方法总结前言: 在做React Native开发的时候避免不了的需要原生模块和JS之间进行数据传递,这篇文章将向大家分享原生模块向JS传递数据的几种方式. 方式一:通过Callbacks的方式说起Callbacks大家都不陌生,它是最常用的设计模式之一.无论是Java,Object-c,C#,还是JavaScript等都会看到Callbacks的身影. 原生模块支持Callbacks类型的参数,该Callbacks对应JS中的f
React Native与Android 原生通信的方法

我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互,这篇文章就是分享原生模块与JS传递数据的几种方式. 总的步骤可以分为如下几点: 在原生端定义Module类,继承ReactContextBaseJavaModule,在Module类里,定义交互的方法. 定义Package类,继承ReactPackage,将Module实例添加到集合. 在android继承的ReactApplication,回调实现getPackages方法,将Package实
Electron集成React和Vue流程方法讲解

目录集成React 1. 热调试 2. 打包集成Vue 集成React 1. 热调试在React项目目录下安装Electron npm install electron 修改package.json文件,增加或将已有的main属性值修改为main.js,在scriptes中添加"electron-start": "electron .",最终配置文件如下: { "name": "electron-react", &quo
Electron打包React生成桌面应用方法详解

目录一.Electron简介二.搭建准备三.创建基本应用程序四.打包项目一.Electron简介 Electron是一个能让你使用JavaScript,HTML和CSS来创建桌面应用程序的框架.这些应用程序可以打包后在 macOS.Windows 和 Linux 上直接运行. 在目前浏览器和移动端盛行的互联网环境下,跨平台的桌面应用开发,也为前端提供了一个新分支方向. 二.搭建准备 1.检查git和node是否安装完成 git --versionnode -vnpm -v 2.搭建Re
React组件通信之路由传参(react-router-dom)

目录最近在学习react,现在的工作中使用的是vue,在学习的过程中对两者进行比较,加深理解. 以下是react中的一小部分知识点,我个人觉得也是比较常用的知识点,react组件通信的其中一种方式--路由传参(react组件通信的方式有多种,如props.事件回调.context.router.redux.缓存等等).现在单页面SPA应用的比较广泛,在不刷新整个页面进行部分页面的跳转,使用路由跳转便在所难免,那么react路由除了进行页面之间的跳转,还有很大一个作用就是进行页面或者组件切换时传
React组件通信浅析

目录 1.函数式组件 2.类式组件 1.函数式组件 <script type="text/babel"> // 1. 创建函数式组件 function Demo() { // 里面的this是undefined,因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件(适用于[简单组件]的定义)</h2> } // 2. 渲染组件到页面 ReactDOM.render(<Demo/>,document.getElem
Vue 兄弟组件通信的方法（不使用Vuex）

项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下面简单介绍一下使用传统方法,实现父子组件通信的方法. 简单实例:我们在a组件中点击按钮,将信息传给b组件,从而使b组件弹出. 主要的思路就是:先子传父,在父传子首先我们在 a.vue 组件中 ,给按钮botton绑定一个handleClick事件,事件中我们通过 this.$emit() 方法去触发一个自定义事件,并传递我们的参数. 示
AngularJS控制器controller正确的通信的方法

AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope. 每个$scope的$root指向$ro
Vue中父组件向子组件通信的方法

Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述.下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示: props 组件实例的作用域是孤立的.子组件的模板中是无法直接调用父组件的数据. 可以使用props将父组件的数据传给子组件.子组件在接受数据时要显示声明props 看下面的例子 <div id="app"> <panda here='China'></panda> </div> <s