Electron js Tutorial - 6 - IPC
HTML-код
- Опубликовано: 16 окт 2024
- 📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
Twitter - / codevolutionweb
Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
This is the BEST tutorial on IPC!!! Things are described so clearly with proper example. Thank you very much!!!
can you help me with a problem? i am having difficulty with importing electron package
same here did you fix it ?@@harrisrizwan6964
You are the MAN!
I learned what I was looking for very quickly and clear. Thank you so much.
And you are my 2nd favorite youtuber after thenetninja :)
Feeling the Same
I have watched like 15 ipc tutorial and I was still confused. Watched this one and it instantly clicked. Thank you so much
I listened to Jessica Lords'(lead developer of Electron) explanation of this and it wasnt as good as your explanation. Good job, I understand it now. I listened to 5 videos and podcasts of her explaining it and she failed. Side note: I love that everyone is using VS Code now, it is awesome, makes me feel like Im on a winning team.
Just watch 2 of your videos on electron.js and clearly you deserve a subscribe, thank you for your effort in making things a lot simpler for beginners.
Your programs don't work in electron version 16.0.5 ,
Can you show us how to fix this , PLEASE .
Thanks
Excellent explanation of the process! Your tutorials a thoroughly explained and very easy to understand
Thank you.
Great tutorial, A little outdated in 2022, would defo appreciate a refresh of this series!
you have a great talent at teaching with excellent examples
Awesome explanation..💛💛💛
Cannot read property 'send' of undefined
Could any help please ?
index.js:
console.log("Render loaded");
const electron = require('electron');
const ipc = electron.ipcRender;
const errorBtn = document.querySelector('.errorBtn');
errorBtn.addEventListener('click', function(){
ipc.send('open-error-dialog'); // ERR Cannot read property 'send' of undefined
console.log('ipc');
});
Double-checked that all the code is the same, but when I click on the button, no error window pops up...anyone know what's up?
When you are defining your new BrowserWindow in main.js you need to include a webPreferences variable also, the code should look like the following:
win = new BrowserWindow({webPreferences:{nodeIntegration: true}, height: 600, width: 500})
The issue is that in the renderer process you normally cannot use NodeJS but you can get around it by using the above method. Hopefully this helps you out.
add this to the main Browser Windows like that :
function() createWindow(){
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})
I am a little confused. Why do we need IPC, at least for this particular purpose? Why can't the renderer process show its own damn error dialog? Why does the "main" process need to get involved?
PS., I agree with the others: excellent presentations!
edit: I guess you address this question at the end of this session by referring to the "remote" module.
This is really good. I like this simple approach.
Thank you. Your explanations are very clear. I coded along and managed to create the main window with button. When I clicked it, the message did not show on the console, and developer tools showed an error: Uncaught Reference Error: require is not defined in index.html line, where the script requires index.js. The code in index.js looks OK, so I don't know where the problem might be. Any suggestions?
The problem is solved by setting the type of script (in index.html) to type="module". In addition, in the main.js file, you may have to set webPreferences: { nodeIntegration: true }, under the mainWindow.
Unfortunately, the problem persists with respect to child windows.
@@GeorgeTrialonis That's the same problem I faced! Thanks for explaining. I figured out the module part, but didn't understand why it still didn't work for the child window. Using the preload script to set the methods on the global window object and then calling it from the child window (window.ipcSctipt.methodname()) solved the require error. I haven't finished watching the tutorial yet, and maybe the preload script will come up. Maybe the tutorial is just outdated here, but even after five years, it's still the best by a fair margin!
Hello. I'm getting the following error. Any help would be appreciated.
TypeError: Cannot read property 'ipcMain' of undefined
How can I ipcMain.send() to renderer.js
expecting nothing back ? Thanks
What is the benefit of the IPC?
Error: "require() not defined"
Is there a way around this without having to set nodeIntegration to true?
Hi guy, in your BrowserWindow add the webPreferences (context example):
const win = new BrowserWindow({
width: 1000,
height: 800,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
This was very helpful thank you
Thank you man, very nice video and right to the point. Here, have my like.
Can you help us with the issue of not able to use non context aware native module in renderer process???
i got this error Uncaught ReferenceError: require is not defined
source code?
@@justafighter1346 everyting fine error couse im use require in
add this to your browser window:
winone = new BrowserWindow({webPreferences: {nodeIntegration: true}, //OTHER STUFF//})
@@NoName-ui5ou Thank you man.
whenever i use the request() function in either the index.html or index.js i get the error: 'require is not defined'. How is it able to be done here?
instead of require, use src property of script tag.
You need the node integration on your BrowserWindow to fix that error.
On the file "main.js" when you instantiate BrowserWindow, your code maybe looks like this:
win = new BrowserWindow();
If you change it to this, it should work:
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
});
I hope it is useful.
Edgar Eduardo Ojeda Cardenas thank you so much it helped me !
It throws me require not defined
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
add this in main.js in browserWindow({})
Same
Thank you for the nice video. Do you know how I can send file content from main module to the renderer process? Basically, I use browser menu File Open function with showOpenDialogSync and once file is available I want to send it back to view to display it. Cannot figure out how to do it in Electron.
@Arijeet Chakraborty yes make your BrowserWindow global and then use BrowserWindow.webContents.send to send your data to the renderer process
What about IPC from a renderer to renderer, which is created and defined from the renderer, not the main process? Like in your tutorial about main/renderer processes, when you create third window from first window. I can't find how to let the main process know about the new window var, and keep getting a reference error, when trying to send the message further to the target renderer.
i have an error which is require is not defined but i follow everything in the video but it didn't work
Firstly i want to Thank you for this video
and can i get the link of the project?
github.com/gopinav/Electron-Tutorials
It was just awesome tutorial !!! Thanks to you ;)
Thank you dude :)
I normally hate watching Indian tutorials about software development for obvious reasons,
but this a genuine very good guide, in editing, content and presentation.
Your English is good too, you speak clear and slow.
good job, you helped me to get used to basic Electron very quickly.
"for obvious reasons"? i must be very obtuse :)
@@delbarton314159 The average quality of a tutorial with a heavy accent is not that high to say the least.
well, you're right but i found that "obv reason" a pretty suspicious thing to say...im not a native english speaker (in algeria we speak arabic/french) but i can understand the most of them.
@@titocorg3898 Who are you?
processees
Slow down
This is out dated I think