Last active
October 27, 2022 18:50
-
-
Save rudifa/096ee6b5cf8d52c2217ec517724744a8 to your computer and use it in GitHub Desktop.
The Electron IPC DOCS/FIDDLES/IPC/PATTERN-3 (21.2.0) Main to renderer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 1. Main prepares a Menu that will let the user | |
// increment/decrement a counter, whose valu will be displayed | |
// in the rendered page | |
// On user click, the callback will send a message | |
// on the channel (update-counter) with the value to add | |
// 2. Preload defines the function handleCounter | |
// that will let the renderer to specify the callback | |
// to be called when a message on the channel (pdate-counter) | |
// arrives from the main | |
// 3. The renderer calls handleCounter to install the callback. | |
// The callback will receive the data sent from the main | |
// as value and will use it to modify the displayed counter value. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --> | |
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> | |
<title>Menu Counter</title> | |
</head> | |
<body> | |
Current value: <strong id="counter">0</strong> | |
<script src="./renderer.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const {app, BrowserWindow, Menu, ipcMain} = require('electron') | |
const path = require('path') | |
function createWindow () { | |
const mainWindow = new BrowserWindow({ | |
webPreferences: { | |
preload: path.join(__dirname, 'preload.js') | |
} | |
}) | |
// 1. Main prepares a Menu that will let the user | |
// increment/decrement a counter, whose valu will be displayed | |
// in the rendered page | |
// On user click, the callback will send a message | |
// on the channel (update-counter) with the value to add | |
const menu = Menu.buildFromTemplate([ | |
{ | |
label: app.name, | |
submenu: [ | |
{ | |
click: () => mainWindow.webContents.send('update-counter', 1), | |
label: 'Increment', | |
}, | |
{ | |
click: () => mainWindow.webContents.send('update-counter', -1), | |
label: 'Decrement', | |
} | |
] | |
} | |
]) | |
Menu.setApplicationMenu(menu) | |
mainWindow.loadFile('index.html') | |
// Open the DevTools. | |
mainWindow.webContents.openDevTools() | |
} | |
app.whenReady().then(() => { | |
ipcMain.on('counter-value', (_event, value) => { | |
console.log(value) // will print value to Node console | |
}) | |
createWindow() | |
app.on('activate', function () { | |
if (BrowserWindow.getAllWindows().length === 0) createWindow() | |
}) | |
}) | |
app.on('window-all-closed', function () { | |
if (process.platform !== 'darwin') app.quit() | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "several-zoo-diagnose-5ax1c", | |
"productName": "several-zoo-diagnose-5ax1c", | |
"description": "My Electron application description", | |
"keywords": [], | |
"main": "./main.js", | |
"version": "1.0.0", | |
"author": "rudifarkas", | |
"scripts": { | |
"start": "electron ." | |
}, | |
"dependencies": {}, | |
"devDependencies": { | |
"electron": "21.2.0" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const { contextBridge, ipcRenderer } = require('electron') | |
// 2. Preload defines the function handleCounter | |
// that will let the renderer to specify the callback | |
// to be called when a message on the channel (pdate-counter) | |
// arrives from the main | |
contextBridge.exposeInMainWorld('electronAPI', { | |
handleCounter: (callback) => ipcRenderer.on('update-counter', callback) | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const counter = document.getElementById('counter') | |
// 3. The renderer calls handleCounter to install the callback. | |
// The callback will receive the data sent from the main | |
// as value and will use it to modify the displayed counter value. | |
window.electronAPI.handleCounter((event, value) => { | |
const oldValue = Number(counter.innerText) | |
const newValue = oldValue + value | |
counter.innerText = newValue | |
event.sender.send('counter-value', newValue) | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* styles.css */ | |
/* Add styles here to customize the appearance of your app */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment