Home Explore 引导页 在线工具 Blog
Register Sign In
Pchen0
/
electron
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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 <[email protected]>

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

Co-Authored-By: John Kleinschmidt <[email protected]>
Erick Zhao 5 years ago
parent
ec87917f58
commit
c2e77e4429
3 changed files with 68 additions and 0 deletions
Split View Show Diff Stats
  1. 27 0
      docs/fiddles/communication/two-processes/asynchronous-messages/index.html
  2. 29 0
      docs/fiddles/communication/two-processes/asynchronous-messages/main.js
  3. 12 0
      docs/fiddles/communication/two-processes/asynchronous-messages/renderer.js

+ 27 - 0
docs/fiddles/communication/two-processes/asynchronous-messages/index.html
View File 

@@ -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>

+ 29 - 0
docs/fiddles/communication/two-processes/asynchronous-messages/main.js
View File 

@@ -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')
 
+})

+ 12 - 0
docs/fiddles/communication/two-processes/asynchronous-messages/renderer.js
View File 

@@ -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
 
+})