欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Electron+React進行通信的方法

 更新時間:2022年06月29日 09:20:09   作者:接著奏樂接著舞。  
electron其實是一個桌面應(yīng)用程序,不是一個標(biāo)準(zhǔn)的前端web程序,所有沒有什么請求的發(fā)生,控制臺network看不到請求,而是只能通過console.log去打印查看,而且通信協(xié)議使用的不是http而是gRPC協(xié)議,這篇文章主要介紹了Electron+React如何進行通信,需要的朋友可以參考下

1.前言:

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

項目的技術(shù)棧為:Electron + React Hooks + typescript

2.一些理解:

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

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

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

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

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

4.前后端交互

 electron提供了ipcMainipcRenderer兩個類進行通信。

前端發(fā)送請求:

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

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

后端接受請求:

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

反過來:

后端發(fā)送請求:

其中mainWindow為項目啟動時創(chuàng)建的窗口,如果創(chuàng)建了多個窗口,可以向指定的窗口發(fā)送請求。

mainWindow.webContents.send(channel, data)

前端監(jiān)聽請求

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這個對象,你會發(fā)現(xiàn)前后端沒有直接交互,而均是通過electron這個“中間人”

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

這是electron和后端通信的接口

到此這篇關(guān)于Electron+React如何進行通信的文章就介紹到這了,更多相關(guān)Electron React通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React合成事件詳解

    React合成事件詳解

    這篇文章主要介紹了React合成事件的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下
    2021-05-05
  • 淺談react-router@4.0 使用方法和源碼分析

    淺談react-router@4.0 使用方法和源碼分析

    這篇文章主要介紹了淺談react-router@4.0 使用方法和源碼分析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-06-06
  • React Native 中實現(xiàn)確認碼組件示例詳解

    React Native 中實現(xiàn)確認碼組件示例詳解

    這篇文章主要為大家介紹了React Native中實現(xiàn)確認碼組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • React組件對子組件children進行加強的方法

    React組件對子組件children進行加強的方法

    這篇文章主要給大家介紹了關(guān)于React組件中對子組件children進行加強的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用React具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • React實現(xiàn)多個場景下鼠標(biāo)跟隨提示框詳解

    React實現(xiàn)多個場景下鼠標(biāo)跟隨提示框詳解

    這篇文章主要為大家介紹了React實現(xiàn)多個場景下鼠標(biāo)跟隨提示框詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • React組件實例三大核心屬性State props Refs詳解

    React組件實例三大核心屬性State props Refs詳解

    組件實例的三大核心屬性是:State、Props、Refs。類組件中這三大屬性都存在。函數(shù)式組件中訪問不到 this,也就不存在組件實例這種說法,但由于它的特殊性(函數(shù)可以接收參數(shù)),所以存在Props這種屬性
    2022-12-12
  • react-native聊天室|RN版聊天App仿微信實例|RN仿微信界面

    react-native聊天室|RN版聊天App仿微信實例|RN仿微信界面

    這篇文章主要介紹了react-native聊天室|RN版聊天App仿微信實例|RN仿微信界面,需要的朋友可以參考下
    2019-11-11
  • react獲取input輸入框的值的方法示例

    react獲取input輸入框的值的方法示例

    這篇文章主要介紹了react獲取input輸入框的值的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • 詳解使用webpack+electron+reactJs開發(fā)windows桌面應(yīng)用

    詳解使用webpack+electron+reactJs開發(fā)windows桌面應(yīng)用

    這篇文章主要介紹了詳解使用webpack+electron+reactJs開發(fā)windows桌面應(yīng)用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • React實現(xiàn)文件上傳和斷點續(xù)傳功能的示例代碼

    React實現(xiàn)文件上傳和斷點續(xù)傳功能的示例代碼

    這篇文章主要為大家詳細介紹了React實現(xiàn)文件上傳和斷點續(xù)傳功能的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-02-02

最新評論