快捷導(dǎo)航

Electron+React進(jìn)行通信的方法

更新時(shí)間：2022年06月29日 09:20:09 作者：接著奏樂(lè)接著舞。

electron其實(shí)是一個(gè)桌面應(yīng)用程序，不是一個(gè)標(biāo)準(zhǔn)的前端web程序，所有沒(méi)有什么請(qǐng)求的發(fā)生，控制臺(tái)network看不到請(qǐng)求，而是只能通過(guò)console.log去打印查看，而且通信協(xié)議使用的不是http而是gRPC協(xié)議，這篇文章主要介紹了Electron+React如何進(jìn)行通信,需要的朋友可以參考下

1.前言：

Electron是使用 JavaScript，HTML 和 CSS 構(gòu)建跨平臺(tái)的桌面應(yīng)用程序

項(xiàng)目的技術(shù)棧為：Electron + React Hooks + typescript

2.一些理解：

這個(gè)項(xiàng)目分為三層，react(渲染層，前端)、electron(中臺(tái)，可以使用nodejs的一些基本系統(tǒng)功能，接收后端的數(shù)據(jù)給渲染層，將渲染層的請(qǐng)求給后端)-后端(處理數(shù)據(jù)，發(fā)送接收數(shù)據(jù))

和正常的前后端分離不一樣的是，多出了一個(gè)electron,而electron其實(shí)就是在react和后端之間的通信橋梁，后端接口先到electron，再通過(guò)electron通信給react，反之也是一樣

electron其實(shí)是一個(gè)桌面應(yīng)用程序，不是一個(gè)標(biāo)準(zhǔn)的前端web程序，所有沒(méi)有什么請(qǐng)求的發(fā)生，控制臺(tái)network看不到請(qǐng)求，而是只能通過(guò)console.log去打印查看，而且通信協(xié)議使用的不是http而是gRPC協(xié)議

3.數(shù)據(jù)交互

以下三張圖截取自Electron官網(wǎng)，在項(xiàng)目中使用非常頻繁，且很重要

4.前后端交互

electron提供了ipcMain和ipcRenderer兩個(gè)類(lèi)進(jìn)行通信。

前端發(fā)送請(qǐng)求：

其中 channel可以理解為調(diào)用的方法名，需要后端對(duì)該方法進(jìn)行監(jiān)聽(tīng)。

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

后端接受請(qǐng)求：

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

反過(guò)來(lái)：

后端發(fā)送請(qǐng)求：

其中mainWindow為項(xiàng)目啟動(dòng)時(shí)創(chuàng)建的窗口，如果創(chuàng)建了多個(gè)窗口，可以向指定的窗口發(fā)送請(qǐng)求。

mainWindow.webContents.send(channel, data)

前端監(jiān)聽(tīng)請(qǐng)求

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

5.一些代碼舉例：

這是electron的文件用于向react通信，可以看到主要使用的是ipcMain這個(gè)對(duì)象

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這個(gè)對(duì)象，你會(huì)發(fā)現(xiàn)前后端沒(méi)有直接交互，而均是通過(guò)electron這個(gè)“中間人”

 ipcRenderer.on(errorChannel, (e: any, error: any) => {
            setError(error)
        })
        ipcRenderer.on(endChannel, (e: any, data: any) => {
            info("模塊加載完成 / 執(zhí)行完畢")
            setExecuting(false)
            updateTasks()
        })

這是electron和后端通信的接口