Electron+React如何进行通信

ゝ一纸荒年。 2023-09-28 12:33 142阅读 0赞

**目录**

前言：

2.一些理解：

3.数据交互

4.前后端交互

5.一些代码举例：

--------------------

#### 前言： ####

**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官网，在项目中使用非常频繁，且很重要 ####

![b3273149e1b046149f87339fff41a0bf.png][]

![d3fcd558e54b4cd98296c770cc237fa0.png][]

![7dcc34e4df894219814821dfb5035db4.png][]

--------------------

#### 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和后端通信的接口

![09efc73c89334424903ba4fbb77b049e.png][]

[b3273149e1b046149f87339fff41a0bf.png]: https://img-blog.csdnimg.cn/b3273149e1b046149f87339fff41a0bf.png
[d3fcd558e54b4cd98296c770cc237fa0.png]: https://img-blog.csdnimg.cn/d3fcd558e54b4cd98296c770cc237fa0.png
[7dcc34e4df894219814821dfb5035db4.png]: https://img-blog.csdnimg.cn/7dcc34e4df894219814821dfb5035db4.png
[ipcMain]: https://electronjs.org/docs/api/ipc-main
[ipcRenderer]: https://electronjs.org/docs/api/ipc-renderer
[09efc73c89334424903ba4fbb77b049e.png]: https://img-blog.csdnimg.cn/09efc73c89334424903ba4fbb77b049e.png