日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Electron+React進行通信的方法_React

作者：接著奏樂接著舞。 ? 更新時間： 2022-08-21 編程語言

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

原文鏈接：https://blog.csdn.net/wanghaoyingand/article/details/125507365

欄目分類
最近更新