iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Electron+React进行通信的方法
  • 408
分享到

Electron+React进行通信的方法

2024-04-02 19:04:59 408人浏览 薄情痞子
摘要

目录1.前言:2.一些理解:3.数据交互4.前后端交互5.一些代码举例:1.前言: Electron是使用 javascript,html 和 CSS 构建跨平台的桌面应用程序 项目

1.前言:

Electron是使用 javascripthtmlCSS 构建跨平台的桌面应用程序

项目的技术栈为: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通信内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Electron+React进行通信的方法

本文链接: https://www.lsjlt.com/news/152909.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Electron+React进行通信的方法
    目录1.前言:2.一些理解:3.数据交互4.前后端交互5.一些代码举例:1.前言: Electron是使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序 项目...
    99+
    2024-04-02
  • Electron进程间通信的实现
    目录主进程与渲染进程之间通信ipc模块 + window.webContentsremote模块渲染进程之间通信使用Electron开发出来的桌面应用都是多进程的,其中包含了一个主进...
    99+
    2024-04-02
  • Electron进程间通信如何实现
    今天小编给大家分享一下Electron进程间通信如何实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。使用Electron开...
    99+
    2023-06-30
  • Node.js和Electron是怎么做进程通信的
    这篇文章主要讲解了“Node.js和Electron是怎么做进程通信的”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Node.js和Electron是怎么做...
    99+
    2024-04-02
  • vue与electron实现进程间的通信详情
    目录一、配置内容1.进程间的通信第一种方式引入ipcRenderer第二种方式引入ipcRenderer2.渲染进程常用配置3.将ipcMain封装到一个js中统一处理三、总结前言:...
    99+
    2024-04-02
  • React父子组件间的通信是如何进行的
    本篇内容介绍了“React父子组件间的通信是如何进行的”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!父子组件通信方式(1)传递数据(父传子)...
    99+
    2023-07-05
  • React父子组件间的通信是怎样进行的
    目录父子组件通信方式父传子子传父ref标记(传递数据)非父子组件通信方式状态提升(兄弟通信)发布订阅模式context状态树传参(跨组件方案)React插槽children实现插槽多...
    99+
    2023-03-14
    React父子组件通信 React组件通信
  • Angular组件间进行通信的方法有哪些
    这篇“Angular组件间进行通信的方法有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Angular组件间进行通信的方...
    99+
    2023-07-04
  • 详解React hooks组件通信方法
    目录一、前言二、父子组件通信1)父组件传值给子组件2)子组件传值给父组件3)跨组件传值(父传孙子组件)一、前言 组件通信是React中的一个重要的知识点,下面列举一下 react h...
    99+
    2024-04-02
  • React组件间通信的方法有哪些
    这篇文章给大家分享的是有关React组件间通信的方法有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、父子组件通信原理:父组件通过props(与vue中的props区分开)向子组件通信,子组件通过回调事件与...
    99+
    2023-06-25
  • Electron集成React和Vue流程方法讲解
    目录集成React1. 热调试2. 打包集成Vue集成React 1. 热调试 在React项目目录下安装Electron npm install electron 修改packag...
    99+
    2024-04-02
  • 如何进行Docker容器之间的通信的方法实现
    如何进行Docker容器之间的通信的方法实现,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。情景:本地已经搭建laradock开发环境(php7.3+mysql5.7),现在...
    99+
    2023-06-22
  • react的通信方式怎么实现
    今天小编给大家分享一下react的通信方式怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一...
    99+
    2024-04-02
  • qt进程通信的方法有哪些
    Qt进程间通信的方法有以下几种:1. 信号与槽:可以在不同的对象之间发送和接收信号,实现进程间的通信。通过QObject的子类的信号...
    99+
    2023-09-13
    qt
  • 用 Python 进行 MQTT 通信
    用 Python 进行 MQTT 通信 简介 MQTT(Message Queuing Telemetry Transport)是一种轻量级的消息传输协议,常用于物联网设备之间的通信。Python 提...
    99+
    2023-09-14
    python 网络
  • Linux进程通信的方法是什么
    本篇内容介绍了“Linux进程通信的方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Linux进程通信具体方法1.管道管道分为有名管...
    99+
    2023-06-28
  • 如何进行socket通信
    本篇文章为大家展示了如何进行socket通信,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。一、使用socket实现一对一的简单通信  socket就是一个开往网络应用必备的功能模块。通过这...
    99+
    2023-06-04
  • 带你了解Angular组件间进行通信的几种方法
    本文纯文字,比较枯燥。因为控制台打印的东西比较鸡肋,所以就不配图了,嗯~希望读者跟着说明代码走一遍更容易吸收~1. 父组件通过属性传递值给子组件相当于你自定义了一个属性,通过组件的引入,将值传递给子组件。Show you the CODE。...
    99+
    2023-05-14
    Angular 组件通信
  • vue兄弟组件间怎么进行通信?方法详解
    Vue.js 是一款渐进式 JavaScript 框架,它的响应式系统和组件化架构使得它在 Web 开发中越来越受欢迎。近来,很多开发者在使用 Vue.js 时遇到了兄弟组件间通信的问题,本文将介绍如何使用 Vue.js 的兄弟组件方法解决...
    99+
    2023-05-14
  • qt进程间通信的方法有哪些
    Qt进程间通信的方法有以下几种: 信号与槽:通过Qt的信号与槽机制,可以在不同的进程之间进行通信。一个进程可以发射信号,另一个进...
    99+
    2023-10-21
    qt
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作