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提供了ipcMain和ipcRenderer兩個類進行通信。
前端發(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 Native 中實現(xiàn)確認碼組件示例詳解
這篇文章主要為大家介紹了React Native中實現(xiàn)確認碼組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08React實現(xiàn)多個場景下鼠標(biāo)跟隨提示框詳解
這篇文章主要為大家介紹了React實現(xiàn)多個場景下鼠標(biāo)跟隨提示框詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09React組件實例三大核心屬性State props Refs詳解
組件實例的三大核心屬性是:State、Props、Refs。類組件中這三大屬性都存在。函數(shù)式組件中訪問不到 this,也就不存在組件實例這種說法,但由于它的特殊性(函數(shù)可以接收參數(shù)),所以存在Props這種屬性2022-12-12react-native聊天室|RN版聊天App仿微信實例|RN仿微信界面
這篇文章主要介紹了react-native聊天室|RN版聊天App仿微信實例|RN仿微信界面,需要的朋友可以參考下2019-11-11詳解使用webpack+electron+reactJs開發(fā)windows桌面應(yīng)用
這篇文章主要介紹了詳解使用webpack+electron+reactJs開發(fā)windows桌面應(yīng)用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02React實現(xiàn)文件上傳和斷點續(xù)傳功能的示例代碼
這篇文章主要為大家詳細介紹了React實現(xiàn)文件上傳和斷點續(xù)傳功能的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02