Electron - Giao tiếp giữa các quá trình
Electron cung cấp cho chúng tôi 2 mô-đun IPC (Inter Process Communication) được gọi là ipcMain và ipcRenderer.
Các ipcMainmô-đun được sử dụng để giao tiếp không đồng bộ từ quy trình chính đến các quy trình kết xuất. Khi được sử dụng trong quy trình chính, mô-đun xử lý các thông báo không đồng bộ và đồng bộ được gửi từ quy trình kết xuất (trang web). Các thông báo được gửi từ trình kết xuất sẽ được gửi tới mô-đun này.
Các ipcRenderermô-đun được sử dụng để giao tiếp không đồng bộ từ quy trình kết xuất đến quy trình chính. Nó cung cấp một số phương pháp để bạn có thể gửi thông báo đồng bộ và không đồng bộ từ quy trình kết xuất (trang web) đến quy trình chính. Bạn cũng có thể nhận được trả lời từ quy trình chính.
Chúng tôi sẽ tạo một quy trình chính và một quy trình kết xuất sẽ gửi cho nhau các thông báo bằng cách sử dụng các mô-đun trên.
Tạo một tệp mới có tên main_process.js với các nội dung sau -
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
const {ipcMain} = require('electron')
let win
function createWindow() {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format ({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
// Event handler for asynchronous incoming messages
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg)
// Event emitter for sending asynchronous messages
event.sender.send('asynchronous-reply', 'async pong')
})
// Event handler for synchronous incoming messages
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg)
// Synchronous event emmision
event.returnValue = 'sync pong'
})
app.on('ready', createWindow)
Bây giờ hãy tạo một index.html và thêm đoạn mã sau vào đó.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Hello World!</title>
</head>
<body>
<script>
const {ipcRenderer} = require('electron')
// Synchronous message emmiter and handler
console.log(ipcRenderer.sendSync('synchronous-message', 'sync ping'))
// Async message handler
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg)
})
// Async message sender
ipcRenderer.send('asynchronous-message', 'async ping')
</script>
</body>
</html>
Chạy ứng dụng bằng lệnh sau:
$ electron ./main_process.js
Lệnh trên sẽ tạo ra kết quả sau:
// On your app console
Sync Pong
Async Pong
// On your terminal where you ran the app
Sync Ping
Async Ping
Bạn không nên thực hiện tính toán các tác vụ nặng / chặn trên quy trình kết xuất. Luôn sử dụng IPC để ủy quyền các nhiệm vụ này cho quy trình chính. Điều này giúp duy trì tốc độ ứng dụng của bạn.