添加 ipc 同步/异步发送消息

electron/controller/example.js

@@ -11,6 +11,7 @@ const electronApp = require('electron').app;
 const {dialog, webContents, shell, BrowserWindow, BrowserView, 
   Notification, powerMonitor, screen, nativeTheme} = require('electron');
 const autoLaunchManager = require('../library/autoLaunch');
+const dayjs = require('dayjs');
 
 let myTimer = null;
 let browserViewObj = null;
@@ -29,7 +30,7 @@ class ExampleController extends Controller {
   /**
    * 所有方法接收两个参数
    * @param args 前端传的参数
-   * @param event - IpcMainEvent 文档：https://www.electronjs.org/docs/latest/api/structures/ipc-main-event
+   * @param event - ipc通信时才有值。invoke()方法时，event == IpcMainInvokeEvent; send()/sendSync()方法时，event == IpcMainEvent
    */
 
   /**
@@ -580,7 +581,32 @@ class ExampleController extends Controller {
     shell.openPath(dir);
     
     return true;
-  }    
+  }
+  
+  /**
+   * 异步消息类型
+   * @param args 前端传的参数
+   * @param event - IpcMainInvokeEvent 文档：https://www.electronjs.org/zh/docs/latest/api/structures/ipc-main-invoke-event
+   */ 
+   async ipcInvokeMsg (args, event) {
+    let timeNow = dayjs().format('YYYY-MM-DD HH:mm:ss');
+    const data = args + ' - ' + timeNow;
+    
+    return data;
+  }  
+
+  /**
+   * 同步消息类型
+   * @param args 前端传的参数
+   * @param event - IpcMainEvent 文档：https://www.electronjs.org/docs/latest/api/structures/ipc-main-event
+   */ 
+  async ipcSendSyncMsg (args) {
+    let timeNow = dayjs().format('YYYY-MM-DD HH:mm:ss');
+    const data = args + ' - ' + timeNow;
+    
+    return data;
+  }  
+
 }
 
 module.exports = ExampleController;

frontend/src/api/main.js

@@ -28,6 +28,8 @@ const ipcApiRoute = {
   checkHttpServer: 'controller.example.checkHttpServer',
   doHttpRequest: 'controller.example.doHttpRequest',
   doSocketRequest: 'controller.example.doSocketRequest',
+  ipcInvokeMsg: 'controller.example.ipcInvokeMsg',
+  ipcSendSyncMsg: 'controller.example.ipcSendSyncMsg',
 }
 
 const specialIpcRoute = {

frontend/src/utils/ipcRenderer.js

@@ -1,6 +1,7 @@
 const { ipcRenderer: ipc } = window.require && window.require('electron') || {}
+
 /**
- * 异步调用主函数
+ * （将废弃，请使用 $ipcInvoke 代替）异步调用主函数
  * @param ipc
  * @param channel
  * @param param
@@ -8,8 +9,6 @@ const { ipcRenderer: ipc } = window.require && window.require('electron') || {}
  */
 const call = (ipc, channel, param) => {
   return new Promise((resolve) => {
-    // 声明渲染进程函数, 用于主进程函数回调, 返回数据
-    // 调用主进程函数
     ipc.once(channel, (event, result) => {
       console.log('[ipcRenderer] [call] result:', result)
       resolve(result)
@@ -18,9 +17,35 @@ const call = (ipc, channel, param) => {
   })
 }
 
+/**
+ * 发送异步消息（invoke/handle 模型）
+ * @param ipc
+ * @param channel
+ * @param param
+ * @returns {Promise}
+ */
+const invoke = (ipc, channel, param) => {
+  const message = ipc.invoke(channel, param);
+  return message;
+}
+
+/**
+ * 发送同步消息（send/on 模型）
+ * @param ipc
+ * @param channel
+ * @param param
+ * @returns {Any}
+ */
+const sendSync = (ipc, channel, param) => {
+  const message = ipc.sendSync(channel, param);
+  return message;
+}
+
 export default {
   install(Vue) {
     Vue.prototype.$ipc = ipc // 全局注入ipc
-    Vue.prototype.$ipcCall = (channel, param) => call(ipc, channel, param) // 全局注入调用主进程函数的方法
+    Vue.prototype.$ipcCall = (channel, param) => call(ipc, channel, param)
+    Vue.prototype.$ipcInvoke = (channel, param) => invoke(ipc, channel, param)
+    Vue.prototype.$ipcSendSync = (channel, param) => sendSync(ipc, channel, param)
   }
 }

frontend/src/views/base/socket/Ipc.vue

@@ -1,5 +1,33 @@
 <template>
   <div id="app-base-socket-ipc">
+    <div class="one-block-1">
+      <span>
+        1. 发送异步消息
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="handleInvoke">发送 - 回调</a-button>
+        结果：{{ message1 }}
+      </a-space>
+      <p></p>
+      <a-space>
+        <a-button @click="handleInvoke2">发送 - async/await</a-button>
+        结果：{{ message2 }}
+      </a-space>            
+    </div>   
+    <div class="one-block-1">
+      <span>
+        <!-- 尽量不要使用，任何错误都容易引起卡死 -->
+        2. 同步消息（不推荐，阻塞执行）
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="handleSendSync">同步消息</a-button>
+        结果：{{ message3 }}
+      </a-space>   
+    </div>        
     <div class="one-block-1">
       <span>
         1. 渲染进程与主进程IPC通信
@@ -39,7 +67,7 @@
         <a-button @click="socketMsgStop">结束</a-button>
         结果：{{ socketMessageString }}
       </a-space>
-    </div>
+    </div>  
   </div>
 </template>
 <script>
@@ -50,7 +78,10 @@ export default {
       content: 'hello',
       content2: 'hello world',
       reply: '',
-      socketMessageString: ''
+      socketMessageString: '',
+      message1: '',
+      message2: '',
+      message3: ''
     }
   },
   mounted () {
@@ -89,6 +120,22 @@ export default {
     socketMsgStop() {
       this.$ipc.send(ipcApiRoute.socketMessageStop, '')
     },
+    handleInvoke () {
+      const self = this;
+      this.$ipcInvoke(ipcApiRoute.ipcInvokeMsg, '异步-回调').then(r => {
+        console.log('r:', r);
+        self.message1 = r;
+      });
+    },
+    async handleInvoke2 () {
+      const msg = await this.$ipcInvoke(ipcApiRoute.ipcInvokeMsg, '异步');
+      console.log('msg:', msg);
+      this.message2 = msg;
+    },
+    handleSendSync () {
+      const msg = this.$ipcSendSync(ipcApiRoute.ipcSendSyncMsg, '同步');
+      this.message3 = msg;
+    },
   }
 }
 </script>

package.json

@@ -96,7 +96,7 @@
   },
   "dependencies": {
     "dayjs": "^1.10.7",
-    "ee-core": "^1.2.2",
+    "ee-core": "^1.2.3",
     "electron-is": "^3.0.0",
     "lodash": "^4.17.21"
   }