I'm trying to send message/data from ipcMain to ipcRender asynchronously, followed the codes described there - https://electronjs.org/docs/api/ipc-main, In main -
// In main process.
const {ipcMain} = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
event.sender.send('asynchronous-reply', 'pong')
})
In renderer -
// In renderer process (web page).
const {ipcRenderer} = require('electron')
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')
It sends message from renderer to main successfully, but main suppose to send back message to renderer but it doesn't.
I've tried webContents send message too but no success -
win.webContents.send('asynchronous-reply', 'pong1')
I'm using using node 8.9.3, Chrome 61.0.3163.100, Electron 2.0.5 and macOS 10.13.3. Here are the details - https://github.com/electron/electron/issues/13743
Appreciate any help. Thanks
Thanks #ancode. Figured it out, The messages sent from Renderer to Main was printing in Terminal Console and message sent from Main to Renderer was printing in Web Dev Console(As a new electron developer, I completely missed it, was expecting all messages in Terminal Console)
Related
Is there a way to send console.log messages to Electron's BrowserWindow ?
There is another way around described here: Electron: Send message from BrowserWindow to Electron app
The need behind such an integration is that many applications like systeminformation using console.log calls to display information
Typical call is:
const si = require('systeminformation');
si.cpu()
.then(data => console.log(data))
Alternative might be different call to send data to browser window instead of console.
By enabling Dev tool, you can see the console.log message.
win.webContents.openDevTools(); //for debugging
// To send message to web page
win.webContents.send("message", message-content);
Here is what work for me:
In main.js:
const {ipcMain} = require('electron')
and replace
console.log(data);
with
mainWindow.webContents.send('asynchronous-message', data);
Changes in render.js:
ipcRenderer.on('asynchronous-message', (event, data) => {
document.getElementById('log').insertAdjacentHTML('beforeend',data + "<br>");
})
In html - create div with id='log'
I have developed a desktop application using electron by wrapping my webpage with electron.
Now how to make my webpage and electron interact i.e. catching any click event inside the webpage and calling a electron function in main.js etc. and passing some data from electron to webpage.
Note: my webpage is developed using angular 1.5
I would recommend to check the electron quick start repository before going on.
https://github.com/electron/electron-quick-start
https://github.com/electron/electron-api-demos
In order to communicate between the main and renderer process you should take a look at the ipcMain and ipcRenderer (ipcMain).
Just for reference here is the sample provided in the documentation.
// In main process.
const {ipcMain} = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
event.sender.send('asynchronous-reply', 'pong')
})
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
event.returnValue = 'pong'
})
// In renderer process (web page).
const {ipcRenderer} = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) //
prints "pong"
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')
Is there way to handle console.log messages from renderer in main process? Similar to CefDisplayHandler::OnConsoleMessage handler in Cef.
You can do this in three ways,
Set the enviroment variableELECTRON_ENABLE_LOGGING=true to parse every console.log to your CLI
Do a IPCrenderer message to IPCmain, which the logs it for you
Add a function to app from the main process
# MAIN
const {app} = require('electron')
app.MySuperCoolLoggingUtility = function (msg) {
console.log(msg)
}
# RENDERER
require('electron').remote.app.MySuperCoolLoggingUtility('hi')
There are also some ways to limit the log level for specific files via --vmodule= but it is not close to the handler of normal Cef. So you will probably build your own utility function for it.
The ability to intercept console messages generated by the renderer process, in the main process, was implemented in Electron version v1.8.2-beta.3 (as far as I were able to determine).
To be able to handle these messages, one attaches a "console-message" event handler to the webContents object property of a BrowserWindow object.
A rather straightforward replication of messages by the main process, could be implemented as follows (win refers to a BrowserWindow you want to capture messages for):
const log_level_names = { "-1": "DEBUG", "0": "INFO", "1": "WARN", "2": "ERROR" };
win.webContents.on("console-message", (ev, level, message, line, file) => {
console.log(`${new Date().toUTCString()}\t${log_level_names[level]}\t${message} (${file}:${line})`);
});
I need to trigger this event from devtools. It gets triggered when called from the main process (js) using mainWindow.webContents.send('get-holdings', 'get holdings!');
I have webPrefences set with nodeIntegration: false as there were jquery and angular errors if nodeIntegration was set to true.
For debugging, I want to do it from devtools console. I looking for the code that needs to be put into the devtools console to trigger the get-holdings event.
ipcRenderer.on('get-holdings', (event, arg) => {
var holdings;
$.getJSON('https://example.com/api/holdings', function(res){
holdings = res.data;
console.log(holdings);
ipcRenderer.send('save-holdings', holdings);
});
console.log(arg);
})
Please help!
Borrowing ideas from the code in devtron, I solved it using this in the pre-load script
window.__electron = require('electron');
Then, I could simply do the following:
win = window.__electron.remote.getCurrentWindow()
win.webContents.send('get-holdings', 'get holdings!');
I'm learning Electron and working with multiple windows and IPC. In my main script I have the following:
var storeWindow = new BrowserWindow({
width: 400,
height: 400,
show: false
});
ipc.on('show-store-edit', function(event, store) {
console.log(store);
storeWindow.loadURL('file://' + __dirname + '/app/store.html');
storeWindow.show();
});
And in my primary window's script, I have the following inside of a click event handler, pulling in a list of stores:
$.getJSON("http://localhost:8080/stores/" + item.id).done(function(store) {
ipc.send('show-store-edit', store);
});
On the console, I am printing the store data from my server. What I'm unclear on is how to get that data into the view for my storeWindow:store.html. I'm not even sure I'm handling the sequence of events correctly but they would be:
click Edit Store
get store data from server
open new window to display store data
or
click Edit Store
open new window to display store data
get store data from server
In the latter, I'm not sure how I would get the ID required to fetch the store from the storeWindow's script.
To send events to particular window you can use webContents.send(EVENT_NAME, ARGS) (see docs). webContents is a property of a window instance:
// main process
storeWindow.webContents.send('store-data', store);
To listen for this event being sent, you need a listener in a window process (renderer):
// renderer process
var ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.on('store-data', function (event,store) {
console.log(store);
});
You need the ipcMain module to achieve this... As stated in the API "When used in the main process, it handles asynchronous and synchronous messages sent from a renderer process (web page). Messages sent from a renderer will be emitted to this module."
API Docs for the ipcMain module:
https://electronjs.org/docs/api/ipc-main
To use the ipcMain you need to have nodeIntegration enabled on webPreferences
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
}
})
Be careful this may cause security issues.
For example: Let's say we want to pass a configuration (json) file to the web page
(Triple dots (...) represent your code that is already placed inside the file, but is not relevant to this example)
main.js
...
const { readFileSync } = require('fs') // used to read files
const { ipcMain } = require('electron') // used to communicate asynchronously from the main process to renderer processes.
...
// function to read from a json file
function readConfig () {
const data = readFileSync('./package.json', 'utf8')
return data
}
...
// this is the event listener that will respond when we will request it in the web page
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg)
event.returnValue = readConfig()
})
...
index.html
...
<script>
<!-- import the module -->
const { ipcRenderer } = require('electron')
<!-- here we request our message and the event listener we added before, will respond and because it's JSON file we need to parse it -->
var config = JSON.parse(ipcRenderer.sendSync('synchronous-message', ''))
<!-- process our data however we want, in this example we print it on the browser console -->
console.log(config)
<!-- since we read our package.json file we can echo our electron app name -->
console.log(config.name)
</script>
To see the console of the browser you need to open the dev tools, either from the default Electron menu or from your code.
e.g. inside the createWindow() function
win.webContents.openDevTools()