2020/08/31 - [Web/JavaScript] - [Electron] Getting Started
2020/08/31 - [Web/JavaScript] - [Electron] BrowserWindow
2020/09/01 - [Web/JavaScript] - [Electron] IPC (Inter Process Communication)
2020/09/01 - [Web/JavaScript] - [Electron] Menu
2020/09/01 - [Web/JavaScript] - [Electron] Global Shortcut
2020/09/01 - [Web/JavaScript] - [Electron] Tray
As I said, the Electron works with main process and renderer processes.
I'm posting about the communication between these processes.
There are two types of communication.
The first thing is synchronous communication and the other thing is asynchronous communication.
Let me explain one by one.
Synchronous Communication
Add a renderer.js file and button to the index.html file.
<head>
...
<script defer src="renderer.js"></script>
...
</head>
<body>
...
<button id="syncBtn">Sync</button>
</body>
Let's create a renderer.js file.
const electron = require("electron");
const ipc = electron.ipcRenderer;
const syncBtn = document.getElementById("syncBtn");
syncBtn.addEventListener("click", () => {
console.log(`sync 1`);
const ret = ipc.sendSync("renderer_sync");
console.log(ret);
console.log(`sync 2`);
});It imports the electron module and defines the ipcRenderer interface.
Add a function to the button that we made.
This function will send a message to the main process if the button is pressed.
I added the log for figuring out the sequence.
The "renderer_sync" is the message name. This name is made by me, you can change this to what you want.
Now, it's time to process the message received.
Add the code into the main.js file.
const ipc = electron.ipcMain;
ipc.on("renderer_sync", (event) => {
event.returnValue = "main_sync";
});Define the ipcMain interface like a renderer side.
If the main process receives the "renderer_sync" message, it returns the "main_sync" message.
The "main_sync" message is made by me as well.
Let's run this!!
Oops!!!
We got an error message.
It's because the default option has changed in the current version, it doesn't include node.js anymore.
Let's fix this.
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
},
});Now, our application is integrated with node.js.
Let's run again!!
Let's wrap it up.
- If you press the button, the log message 'sync 1' shows up in the console log.
- The renderer process sends a message to the main process.
- The main process returns a message to the renderer process.
- The log message 'main_sync' shows up in the console log.
- The last log message 'sync 2' shows up in the console log, and the function finishes.
Asynchronous Communication
Add one more button for asynchronous communication into the index.html file.
<button id="asyncBtn">Async</button>
And add code for asynchronous communication into the renderer.js file.
const asyncBtn = document.getElementById("asyncBtn");
asyncBtn.addEventListener("click", () => {
console.log(`async 1`);
ipc.send("renderer_async");
console.log(`async 2`);
});
ipc.on("main_async", (event, arg) => {
console.log(arg);
});
And lastly, add code into the main.js file.
ipc.on("renderer_async", (event) => {
event.sender.send("main_async", "Message triggered by Main");
});
It is very similar to synchronous communication.
Let's run it!!
Let's wrap it up.
- If you press the Async button, the log message 'sync 1' shows up in the console log.
- The renderer process sends a message to the main process.
- The renderer process doesn't wait for response from the main process, so the log message 'sync 2' shows up in the console log and the function is finished.
- The main process handles the message sent by the renderer process when it is possible and sends a message to the renderer process.
- If the renderer process received the message from the main process, the log message 'Message triggered by Main' shows up in the console.log.
Summarize
The Electron can communicate between the main process and the renderer process using IPC.
There are the synchronous method and the asynchronous method in the IPC.
In synchronous communication, the message is processed in a blocking method so waits until the communication is completed.
In asynchronous communication, the message is processed in a non-blocking method so the doesn't wait for finishing the communication.
You can name messages as you want to call.
'Web > JavaScript' 카테고리의 다른 글
| [Electron] Tray (0) | 2020.09.01 |
|---|---|
| [Electron] Global Shortcut (0) | 2020.09.01 |
| [Electron] Menu (0) | 2020.09.01 |
| [Electron] BrowserWindow (0) | 2020.08.31 |
| [Electron] Getting Started (0) | 2020.08.31 |
댓글