Skip to content
Permalink
Browse files

docs: add Asynchronous Messages Fiddle example (#20441)

* docs: add Asynchronous Messages Fiddle example

* Update docs/fiddles/communication/two-processes/asynchronous-messages/main.js

Co-Authored-By: John Kleinschmidt <jkleinsc@github.com>

* Update docs/fiddles/communication/two-processes/asynchronous-messages/index.html

Co-Authored-By: John Kleinschmidt <jkleinsc@github.com>
  • Loading branch information...
erickzhao and jkleinsc committed Oct 10, 2019
1 parent ec87917 commit c2e77e442918199ba5167eaeaa328cf7bbe90e44
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<div>
<h1>Asynchronous messages</h1>
<i>Supports: Win, macOS, Linux <span>|</span> Process: Both</i>
<div>
<div>
<button id="async-msg">Ping</button>
<span id="async-reply"></span>
</div>
<p>Using <code>ipc</code> to send messages between processes asynchronously is the preferred method since it will return when finished without blocking other operations in the same process.</p>

<p>This example sends a "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: 'Asynchronous messages',
webPreferences: {
nodeIntegration: true
}
}

mainWindow = new BrowserWindow(windowOptions)
mainWindow.loadFile('index.html')

mainWindow.on('closed', () => {
mainWindow = null
})
}

app.on('ready', () => {
createWindow()
})

ipcMain.on('asynchronous-message', (event, arg) => {
event.sender.send('asynchronous-reply', 'pong')
})
@@ -0,0 +1,12 @@
const { ipcRenderer } = require('electron')

const asyncMsgBtn = document.getElementById('async-msg')

asyncMsgBtn.addEventListener('click', () => {
ipcRenderer.send('asynchronous-message', 'ping')
})

ipcRenderer.on('asynchronous-reply', (event, arg) => {
const message = `Asynchronous message reply: ${arg}`
document.getElementById('async-reply').innerHTML = message
})

0 comments on commit c2e77e4

Please sign in to comment.
You can’t perform that action at this time.