electron Flashcards
el: To open devtools automatically, type
in main.js
app.on(‘ready’, ()=>{
….
mainWindow.webContents.openDevTools();
}
el: In electron
Every html view needs to import its own personal js file.
use either -script>require(‘./file.js’)-/script> or -script src=”file.js”>-/script>
The js files for each window can only send info to each other using ipc because each window is its own process.
el: The only way any js files in other windows send data to each other is
using ipc because each window is its own process.
ipc creates an app-wide connection where each js file can send or listen for messages with a specific name.
i.e.
in the main.js process
const {ipcMain} = require(‘electron’)
ipcMain.on(‘unique-name’, (event, param) => {
console.log(…)
})
windowVarName.webContents.send(‘unique-name’, payload)
in another window
const {ipcRenderer} = require(‘electron’)
ipcRenderer.on(‘unique-name’, (event, param) => {
console.log(…)
})
ipcRenderer.send(‘unique-name’, payload)
note: use ipcMain for main.js and ipcRenderer for other windows.
el: Instantiate, hiding, and showing all windows happens from
the main.js process. If you want to open a window from another window, it has to already be instantiated in the main process and then you must send an ipc message to the main process to show it.
i.e.
in other window
ipcRenderer.send(‘open-window’, payload)
in main.js
ipcMain.on('open-window', (event, param) => {
windowVarName.hide()
windowVarName.show()
})
https://www.christianengvall.se/ipcmain-and-ipcrenderer/
el: pub sub means
a common channel where messages can be sent and listened for by other modules based on unique ids/names.
el: main.js does not
get imported into any html views
el: The difference between a main process and a renderer process is
the main process is defined in package.json as “main”: “src/main.js”,
and the renderer process is the separate js file you require into each new window.
js: learn the difference between
const screenId = desktopCapturer.getSources({ types: ['screen'] }, (error, sources) => {
if (error) throw error
let sourcesList = document.querySelector('.capturer-list')
for (let source of sources) {
console.log(source)
if (source.name == 'Entire screen') {
console.log(`${source.id} 24`)
return source.id
}
}
})
and
const screenId = () => {
desktopCapturer.getSources({ types: ['screen'] }, (error, sources) => {
if (error) throw error
let sourcesList = document.querySelector('.capturer-list')
for (let source of sources) {
console.log(source)
if (source.name == 'Entire screen') {
console.log(`${source.id} 24`)
}
return source.id
}
})
}
note; I think one is a closure that I would need to call ()() twice
how do I make this function (which takes a while to run) trigger another function?
Prob just put it in the callback as a function… it takes a callback for a reason, its slow.
desktopCapturer.getSources({ types: ['screen'] }, (error, sources) => {
// if (error) throw error
let sourcesList = document.querySelector('.capturer-list')
for (let source of sources) {
console.log(source)
if (source.name == 'Entire screen') {
console.log(`${source.id} 24`)
}
screenId = source.id
}
})el: To send large files (a few mbs) from electron to server
you cannot use fetch, you must use the http module or even better its wrapper module called request.
const request = require(‘request’);
request.post(‘https://site.com’, {form: {body: ‘string’}}, (e, r, body) => console.log(r) )
el: To send binary data to api using request, you must
add encode: null to options, or else it will be encoded
el: You must declare all event listeners in
document.addEventListener(‘DOMContentLoaded’, () => {
})
el: You cannot use
fs in electron
el: const and let work, but
const { import1, import2 } = require(‘package’) does not work…
el: If you put mainWindow.hide() before mainWindow.loadFile(‘index.html’)
the js will not load, and you cant send ipc messages to it
