Day18 of 100DaysOfCode

#electron #beginners #100daysofcode

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.