如何使用 Electron 将变量数据发送到 React 应用程序

Question

嗨，我正在尝试重新利用一个我发现有趣的旧应用程序，我也想从基于 Web 的 React 应用程序迁移到电子 GUI 并仍然使用 React

最初，应用程序使用express来发出数据，并且数据是通过io.on在网络应用程序上接收的，但我切换到了电子，我正在使用预加载和渲染器文件

旧的数据传输方式 服务器.js

// Server part
var app = express();

app.use('/', express.static(path.join(__dirname, 'public')));
var port = 8090
var server = app.listen(port);
console.log('Server listening on port ' + port);

// Socket.IO part
var io = require('socket.io')(server);

io.on('connection', function (socket) {
    console.log('New client connected!');

    //send data to client
    setInterval(function () {

        // Change values so you can see it go up when developing
        if (process.env.NODE_ENV === "development") {
            //do something with the data
        }
        socket.emit('ecuData', { send the data });
    }, 100);
});

dash.jsx

componentDidMount: function () {
    this.socket = io();
    this.socket.on('ecuData', function (data) {
        this.setState({ rpm: data.rpm });
        this.setState({ coolantTemp: data.coolantTemp });
        this.setState({ fuelLevel: data.fuelLevel })
        this.setState({ odo: data.odo })
        this.setState({ drive: data.drive })
        this.setState({ amp: data.amp })
        this.setState({ dte: data.dte })
    });
},

传输数据的新方式 当窗口完成加载时，首先 render.js setIntervale 每 100 毫秒发送一次请求

document.addEventListener('DOMContentLoaded', () => {
    setInterval(async () => {    
        const data = await electronAPI.getDashData();
    }, 100);
})

preload.js 将请求转发到主进程

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
    getDashData: (data) => ipcRenderer.invoke('getData', data)
})

gui.js（主进程）接收请求并返回一个包含所有更新数据的对象

const createWindows = (win, page) => {
    win = new BrowserWindow({
        width: 1024,
        height: 600,
        resizable: false,
        fullscreen: true,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        },
    });
    if(page == "dash.html"){
        ipcMain.handle('getData', (req, data) => {
            var dashData = {
                rpm: rpm,
                carSpeed: carSpeed,
                coolantTemp: coolantTemp,
                fuelLevel: fuelLevel,
                odo: odo,
                drive: drive,
                amp: amp,
                dte: dte,
                onoffLights: onoffLights
            }
            return (dashData);
        })
    }
    win.loadFile(page)
};

function updateData() {
    // Change values so you can see it go up when developing
    if (process.env.NODE_ENV === "development") {
        setInterval(() => {
            //do something with the data
        }, 100)
    }
}
app.whenReady().then(() => {
    createWindows(leftWindow, "dash.html");
    //createWindows(rightWindow, "controls.html");
    updateData()
});

当数据发送回 render.js 时，我可以添加

alert(data.rpm)

并显示更新的 rpm，但我不知道如何将数据直接发送到 dash.jsx 来更新我的 gui，我只能转到控制台并查看数据

Answer 1

预加载.js

const api = {
 on: (channel: string, callback: (data: any) => void) => {
    ipcRenderer.on(channel, (_: any, data: any) => callback(data));
  },
};

// Expose the API to the renderer process
contextBridge.exposeInMainWorld('Main', api);

main.js

mainWindow.webContents.send('event-name', e);

在您的 React 应用程序中按照以下方式收听。

 useEffect(() => {
    window.Main.on('event-name', (e) => {
      console.log(e);
    });
  }, []);

如果您使用打字稿，请不要忘记在 types.d.ts 中定义类型

declare global {
  interface Window {
    Main: {
      on: (channel: string, callback: (data: any) => void) => void;
    };
  }
}