docs: add Synchronous Messages Fiddle example (#20451)
* docs: add Synchronous Messages Fiddle example * Code review changes * Add OS support info
This commit is contained in:
		
					parent
					
						
							
								dcf6f046d9
							
						
					
				
			
			
				commit
				
					
						0fe718b1d9
					
				
			
		
					 3 changed files with 65 additions and 0 deletions
				
			
		| 
						 | 
				
			
			@ -0,0 +1,27 @@
 | 
			
		|||
<!DOCTYPE html>
 | 
			
		||||
<html>
 | 
			
		||||
  <head>
 | 
			
		||||
    <meta charset="UTF-8">
 | 
			
		||||
  </head>
 | 
			
		||||
  <body>
 | 
			
		||||
    <div>
 | 
			
		||||
      <div>
 | 
			
		||||
        <h1>Synchronous messages</h1>
 | 
			
		||||
        <i>Supports: Win, macOS, Linux <span>|</span> Process: Both</i>
 | 
			
		||||
        <div>
 | 
			
		||||
          <div>
 | 
			
		||||
            <button id="sync-msg">Ping</button>
 | 
			
		||||
            <span id="sync-reply"></span>
 | 
			
		||||
          </div>
 | 
			
		||||
          <p>You can use the <code>ipc</code> module to send synchronous messages between processes as well, but note that the synchronous nature of this method means that it <b>will block</b> other operations while completing its task.</p>
 | 
			
		||||
          
 | 
			
		||||
          <p>This example sends a synchronous message, "ping", from this process (renderer) to the main process. The main process then replies with "pong".</p>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <script>
 | 
			
		||||
      // You can also require other files to run in this process
 | 
			
		||||
      require('./renderer.js')
 | 
			
		||||
    </script>
 | 
			
		||||
  </body>
 | 
			
		||||
</html> 
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,29 @@
 | 
			
		|||
const { app, BrowserWindow, ipcMain } = require('electron')
 | 
			
		||||
 | 
			
		||||
let mainWindow = null
 | 
			
		||||
 | 
			
		||||
function createWindow () {
 | 
			
		||||
  const windowOptions = {
 | 
			
		||||
    width: 600,
 | 
			
		||||
    height: 400,
 | 
			
		||||
    title: 'Synchronous Messages',
 | 
			
		||||
    webPreferences: {
 | 
			
		||||
      nodeIntegration: true
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  mainWindow = new BrowserWindow(windowOptions)
 | 
			
		||||
  mainWindow.loadFile('index.html')
 | 
			
		||||
 | 
			
		||||
  mainWindow.on('closed', () => {
 | 
			
		||||
    mainWindow = null
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
app.on('ready', () => {
 | 
			
		||||
  createWindow()
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
ipcMain.on('synchronous-message', (event, arg) => {
 | 
			
		||||
    event.returnValue = 'pong'
 | 
			
		||||
})
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,9 @@
 | 
			
		|||
const { ipcRenderer } = require('electron')
 | 
			
		||||
 | 
			
		||||
const syncMsgBtn = document.getElementById('sync-msg')
 | 
			
		||||
 | 
			
		||||
syncMsgBtn.addEventListener('click', () => {
 | 
			
		||||
    const reply = ipcRenderer.sendSync('synchronous-message', 'ping')
 | 
			
		||||
    const message = `Synchronous message reply: ${reply}`
 | 
			
		||||
    document.getElementById('sync-reply').innerHTML = message
 | 
			
		||||
})
 | 
			
		||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue