Today, I made a small program using two-way Inter-Process Communication (IPC).
Then, a defect occurred, and I struggled with it for an hour.
After all, the cause was a mere mistake...(embarrassing!)
What I did
- Making small program to learn how two-way IPC behaves
What I learned
- Extracting text from a textbox on GUI
Today's deliverables
// main.js "use strict" const { app, BrowserWindow, ipcMain} = require('electron'); function createWindow() { const mainWindow = new BrowserWindow({ width: 400, height: 300, title: 'IPC App', webPreferences: { nodeIntegration: true, contextIsolation: false, } }); ipcMain.handle('two-way-com', async (_e, _arg) => { console.log("_arg:", _arg); return _arg; }); mainWindow.loadFile('index.html'); }; app.once('ready', () => { createWindow(); }); app.once('window-all-closed', () => app.quit()); <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-policy" content="default-src 'self'" /> <meta name="viewport" content="width=device-width, inicial-scale=1.0" /> <title>IPC App</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h2>Input something</h2> Send to main: <input type="text" id="send"/> <button id="button">Send</button> <p id="receive">Receive from main</p> <script src="index.js"></script> </body> </html> const {ipcRenderer} = require("electron"); const button = document.getElementById("button"); const receive = document.getElementById("receive"); const send = document.getElementById("send"); button.addEventListener('click', async () => { receive.textContent = await ipcRenderer.invoke('two-way-com', send.value); // I mistook `send.value` into `send.textContent` }); I will try to combine this code with another program.
Top comments (0)