Html 如何使用electron ipc更新文本字段

我一直在研究我的问题，所有箭头都指向IPCDrender/ipcMain，以便在使用electron时处理DOM事件。但在使用ipc时，似乎是网页发送，js文件接收。我需要倒着做——我不确定这是准确的还是可能的。因此，我正在寻求一些澄清和帮助

My

main.js

通过ZMQ连接到一个速率表，并轮询位置和速度。我想依次将收到的信息发送到我的

index.html

并显示在文本字段中。此应用程序中没有用户交互。JS代码只是运行并更新HTML前端中的值。 数据是从

pollPos

和

pollVel

函数中收集和发送的，您将看到

ipcMain.send

，我知道这不是真正的功能。我不知道；我不想等待事件发送，因为表中的数据更新非常快

如何正确使用ipc将数据显示到文本字段中？或者我应该完全使用其他东西

main.js

let zmq = require("zeromq");
const { stringify } = require("querystring");

// Electron stuff for the POSITION and VELOCITY GUI. 
const electron = require('electron');
const { app, ipcMain, BrowserWindow } = require('electron');
const path = require('path');
const { DH_NOT_SUITABLE_GENERATOR } = require("constants");
const { deflate } = require("zlib");

// function for delay 
const delay = ms => new Promise(res => setTimeout(res, ms));

// creating ZMQ Request
let sock = new zmq.Request();

// Bool for connection to Rate Table. 
let connected = Boolean(false);

// Events for the zmq request.
let events = sock.events;

// Global instance of guiWindow. 
var guiWindow;

// When the app is ready, create window and attempt table connection
app.on('ready', () => {
    try{
        // Create window for gui - will not show until connection is successfully established.
        createWindow();
        // Connect to the table
        connectTable();
    }catch(e){
        // Catch connection error
        console.log(e);
    }
});

// Event for connection
events.on("connect", async () => {
    // notify connected, set bool. 
    console.log("Connected.");
    connected = true;

    // show the gui 
    guiWindow.show();

    // while connected, poll for position and velocity.
    while(connected === true){
        await pollPos();
        await pollVel(); 
    } 
});

// -------------------------------------------------------------------------------------------------------
// createWindow - Creates the electron window for the HTML. 
// -------------------------------------------------------------------------------------------------------
function createWindow () {
    guiWindow = new BrowserWindow({
      show: false,
      titleBarStyle: 'hidden',
      autoHideMenuBar: true,
      width: 400,
      height: 320,
      resizable: false,
      frame: true,
      webPreferences: {
        nodeIntegration: true
      }
    });
  
    guiWindow.loadFile('index.html');
  }

// -------------------------------------------------------------------------------------------------------
// connectTable - essentially the main function - while the application is not connected, it repeatedly
//              attemps to connect. 
// -------------------------------------------------------------------------------------------------------
let connectTable = async () => {

    var attemptCount = 0; 
    while(!connected) {
        console.log("Connecting...");
        attemptCount++;
        await sock.connect("tcp://169.254.114.186:1250");
        await new Promise((resolve,reject)=>{setTimeout(resolve,1000);});
        await delay(1500); // wait 1.5s before attempting to connect again. 

        // Throw error after 15 unsuccessful attempts. 
        if(attemptCount > 15){
            throw "\n\n--Max Connection Attempts Exceded--\nPlease check cables and verify rate table is turned on.\nThen restart application.\n";
        }
    }
    
    return;
};

// // -------------------------------------------------------------------------------------------------------
// pollPos - polls table for position
// -------------------------------------------------------------------------------------------------------
let pollPos = async () => {
    let logic = new Promise((resolve, reject) => {
            // Send the command and wait for the response.
            sock.send("PPO").then(async (result) => {
                let [pMSG] = await sock.receive();
                console.log(" position: " + pMSG.toString('utf8'));
                ipcMain.send('updatePos',pMSG.toString('utf8'));
                return resolve(result);
            }, (error) => {
                console.error(error);
            });
    });
    return logic;
};

// -------------------------------------------------------------------------------------------------------
// pollVel - polls table for velocity
// -------------------------------------------------------------------------------------------------------
let pollVel = async () => {
    let logic = new Promise((resolve, reject) => {
            // Send the command and wait for the response.
            sock.send("PVE").then(async (result) => {
                let [vMSG] = await sock.receive();
                console.log(" velocity: " + vMSG.toString('utf8'));
                ipcMain.send('updateVel',vMSG.toString('utf8'));
                return resolve(result);
            }, (error) => {
                console.error(error);
            });
    });
    return logic;
};

index.html

<!DOCTYPE html>
<script>
    const { ipcRenderer } = require('electron')

    ipcRenderer.on('updatePos', (event, message) => {
        document.getElementById('pField').innerHTML = message
    });
    ipcRenderer.on('updateVel', (event, message) => {
        document.getElementById('vField').innerHTML = message
    });
</script>
<html>
<head>
    <meta charset="UTF-8">
    <title>Position/Velocity GUI</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<style>
    input[type=text]{
        width: 60%;
        border: 2px solid #aaa;
        border-radius: 4px;
        margin: 8px 0;
        outline: none;
        padding: 15px;
        box-sizing: border-box;
        font-size: 18px;
        text-align: right;
    }
</style>
<body style="background: white;">
    <p>
        <h2>Position:</h2>
        <input type="text" id="pField" placeholder="0.000" readonly>
        <h2>Velocity:</h2>
        <input type="text" id="vField" placeholder="0.000" readonly>
    </p>
</body>
</html>

常量{ipcRenderer}=require（'electron'）
ipcRenderer.on（'updatePos'，（事件、消息）=>{
document.getElementById（'pField'）。innerHTML=message
});
ipcRenderer.on（'UpdateLevel'，（事件、消息）=>{
document.getElementById（'vField'）。innerHTML=message
});
位置/速度图形用户界面
输入[类型=文本]{
宽度：60%；
边框：2倍实心#aaa；
边界半径：4px；
利润率：8px0；
大纲：无；
填充：15px；
框大小：边框框；
字号：18px；
文本对齐：右对齐；
}

职位：
速度：

只需更改：

ipcMain.send（'updatePos'，pMSG.toString（'utf8'）；
ipcMain.send（'updateVel'，vMSG.toString（'utf8'）；

致：

据我所知，IPC应该能够处理快速的请求，所以试一下，看看结果如何

:

还可以将消息从主进程发送到渲染器进程，有关详细信息，请参阅

guiWindow.webContents.send('updatePos',pMSG.toString('utf8'));
guiWindow.webContents.send('updateVel',vMSG.toString('utf8'));