Packaging for native applications using electron (2)---communication between the main process and the rendering process

The previous article on the use of electron packaging configuration-related files, this is mainly about electron in a very important way of communication .

First explain a concept: Electron packaging application contains two parts

• The electron Environment (node), which is the main process.
• Web rendering environment, secondary process.

The two environments are isolated from each other and cannot communicate directly, so with this article.

Three characters:

• Ipcrender
• Ipcmain
• Webcontents

Ipcrenderer for rendering processes

• Ipcrenderer.on (channel, listener)--channel for event channel, string. Listener is a trigger callback function for responding to Webcontent.send ()
• Ipcrenderer.send (channel, data)--concept ibid, used to send asynchronous information to Ipcmain.
• Ipcrenderer.sendsync (channel, data)--used to send synchronization information to Ipcmain, which blocks the rendering process, unless it must be used sparingly.

Ipcmain for the main process, in response to messages sent from the render process

• Ipcmain.on (Channel,listener)--responds to the same channel from Ipcrender.
• Ipcmain.once (Channel,listener)--ditto, but only once, automatically unbind after triggering
• Ipcmain.removelistener (Channel,listener)--remove event, listener must be a function reference, cannot be an anonymous function or an arrow function, otherwise it cannot be unbound
• Ipcmain.removealllistener ([channel])--Removes all events on the channel
Listener (event, data)
• Event.sender.send (channel, data)--This is the only way that Ipcmain can return messages asynchronously, sending a message to the render process through the event parameter. (corresponds to Ipcrenderer.send)
• Event.returnvalue (Channel,data)--Ipcmain synchronous return message (corresponding to Ipcrenderer.sendsync)
• Data is the data that is carried by the sender of the message

The last one is webcontent.

Do not know the careful reader has found that Ipcmain itself is unable to send the event directly, only by responding to event callback events to send, if we want to let the main process to send a message? That's the way it is. This webcontent is the method in the Browserwindow instance

• Webcontent.send (Channel,data)--The main process sends messages to the render process.

Note that these methods all need to be valid after the main process has created Browserwindow, and here's an example:

Before shutting down the client, you need to determine that the modified file has been saved. For flowchart:

The first is the render-side code:

Const ELECTRON = require (' electron ')//Introduction of ElectronConst Ipcrenderer = electron.ipcrenderer;//get Ipcrender Rendering processLet To_close =false //define allow to close variablesIpcrenderer.on (' Save_complete ', () = To_close =true)//set to close if save is completeIpcrenderer.on (' Not_save ', () = To_close =false)//otherwise set to not be closed//Global Click Close button to invokeWindow.onbeforeunload = (e) = = {  !to_close && (E.returnvalue =false)//return False to prevent shutdown if off is not allowedIpcrenderer.send (' Need_close ')//send need to close message}

followed by the main process code

Const ELECTRON = require (' electron ') Const App=Electron.appconst Dialog= Electron.dialog//Create dialog boxConst BROWSERWINDOW =Electron. Browserwindowconst Ipcmain=Electron.ipcmainlet Need_close=false //whether it needs to be closed (if you just click Save, you don't need to close)Ipcmain.on (' Need_close ', () = Need_close =true)//set to True if required//When you click SaveMainWindow.webContents.session.on (' Will-download ', (event, downloaditem,webcontents) = {  //Block Default Save behavior (click the A tab)Event.returnvalue =false; //Displays the Save dialog box with the default extension of. txtConst FILENAME =Dialog.showsavedialog ({defaultpath:' New Works ', Filters: [{name:' txt ', extensions: [' txt '] }],  }); //if not saved properly  if(typeofFileName = = ' undefined ') {    //cannot exitNeed_close =false    //Send no save message to render sideWebcontents.send (' Not_save ')    //Cancel Download    returnDownloaditem.cancel (); }  //normal DownloadDownloaditem.setsavepath (fileName); //at the end of the current loadDownloaditem.on ("Done", (event, state) = = {    //There are three kinds of state completed, cancelled, interrupted, where only the listening is done    if(state = = = ' Completed ')) {      //Send complete SaveWebcontents.send (' Save_complete ')      //quit the app if you need to close itNeed_close &&App.Quit (); }  });})

This is very simple to show how to deliver messages on the render side and on the server side. Can basically meet the communication needs.

Packaging for native applications using electron (2)---communication between the main process and the rendering process