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)