Electron main process and rendering process

In this section, we will learn what is the main process and the rendering process, what is the difference between the main process and the rendering process, and the communication between the main process and the rendering process. Let's first look at the concept of process.

Process (Process) is a running activity of a program on a certain data set in a computer. It is the basic unit of the system for resource allocation and scheduling, and is the foundation of the operating system structure.

What is the main process

In Electron main.js script that runs when the project is started is what we call the main process. The script running in the main process can GUI in the form of web page.

A Electron application has one and only one main process. And all system events such as window creation must be carried out in the main process.

What is the rendering process

Since Electron uses Chromium to display the page, the multi-process structure of Chromium Each Electron page is running its own process, which is called the rendering process.

That is to say, every time a web page is created, a rendering process will be created. Each web page runs in its own rendering process. Each rendering process is independent, it only cares about the page it is running on.

The difference between the main process and the rendering process

The main process uses the BrowserWindow instance to create a web page. Each BrowserWindow in its own rendering process. When an BrowserWindow is destroyed, the corresponding rendering process will also be terminated.

The main process manages all pages and their corresponding rendering processes. Each rendering process is independent of each other and only cares about their own web pages.

Use Electron's API

Electron provided in the main process and rendering process a large number of API to help develop desktop applications, in the main process and rendering process, by require() methods include it in the module, in order to obtain Electron of API .

Introduce electron :

const electron = require('electron');

All Electron of API are assigned to one process type. Many API can only be used in the main process or rendering process, but some of them API can be used in both processes at the same time. Each API will state in which process we can use the API .

Electron window in use BrowserWindow a type instance is created, it can only be used in the main process, as follows:

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()

Communication between the main process and the rendering process

Electron main process that runs in the background, the corresponding main.js file. The rendering process is seen by the front end, corresponding to the index.html file. ipc method is preferred for communication between the two processes, because it will return when it is completed without blocking other operations in the same process.

Asynchronous communication

Asynchronous communication, after sending a message, will not prevent the continued operation of the program in the same process. The following example rendering process sends an asynchronous message ping to the main process, and then the main process answers pong .

Example:

Renderer process:

const ipc = require('electron').ipcRenderer

const asyncMsgBtn = document.getElementById('async-msg')

asyncMsgBtn.addEventListener('click', function () {
  ipc.send('asynchronous-message', 'ping')
})

ipc.on('asynchronous-reply', function (event, arg) {
  const message = `异步消息回复: ${arg}`
  document.getElementById('async-reply').innerHTML = message
})

Main process:

const ipc = require('electron').ipcMain

ipc.on('asynchronous-message', function (event, arg) {
  event.sender.send('asynchronous-reply', 'pong')
})

Sync message

In addition to sending messages between processes asynchronously, we can also use the ipc module to send synchronous messages between processes, but the synchronous nature of this method means that it will block other operations while completing tasks.

Example:

Renderer process:

const ipc = require('electron').ipcRenderer

const syncMsgBtn = document.getElementById('sync-msg')

syncMsgBtn.addEventListener('click', function () {
  const reply = ipc.sendSync('synchronous-message', 'ping')
  const message = `同步消息回复: ${reply}`
  document.getElementById('sync-reply').innerHTML = message
})

Main process:

const ipc = require('electron').ipcMain

ipc.on('synchronous-message', function (event, arg) {
  event.returnValue = 'pong'
})

Link: https://www.9xkd.com/