重写双向通信demo

electron/controller/example.js

@@ -81,17 +81,6 @@ class ExampleController extends Controller {
   }
 
   /**
-   * hello
-   */
-  hello (args) {
-    let newMsg = args + " +1";
-    let content = '';
-    content = '收到：' + args + '，返回：' + newMsg;
-
-    return content;
-  }
-
-  /**
    * 消息提示对话框
    */
   messageShow () {
@@ -151,40 +140,6 @@ class ExampleController extends Controller {
   }
 
   /**
-   * 长消息 - 开始
-   */
-  socketMessageStart (args, event) {
-    // 每隔1秒，向前端页面发送消息
-    // 用定时器模拟
-    
-    // 前端ipc频道 channel
-    const channel = 'controller.example.socketMessageStart';
-    myTimer = setInterval(function(e, c, msg) {
-      let timeNow = Date.now();
-      let data = msg + ':' + timeNow;
-      e.reply(`${c}`, data)
-    }, 1000, event, channel, args)
-
-    return '开始了'
-  }
-
-  /**
-   * 长消息 - 停止
-   */
-  socketMessageStop () {
-    clearInterval(myTimer);
-    return '停止了'
-  }
-
-  /**
-   * 执行js语句
-   */
-  executeJS (args) {
-    let jscode = `(()=>{alert('${args}');return 'fromJs:${args}';})()`;
-    return webContents.fromId(1).executeJavaScript(jscode);
-  }
-
-  /**
    * 加载视图内容
    */
   loadViewContent (args) {
@@ -607,6 +562,39 @@ class ExampleController extends Controller {
     return data;
   }  
 
+  /**
+   * 双向异步通信
+   * @param args 前端传的参数
+   * @param event - IpcMainEvent 文档：https://www.electronjs.org/docs/latest/api/structures/ipc-main-event
+   */
+  ipcSendMsg (args, event) {
+    // 前端ipc频道 channel
+    const channel = 'controller.example.ipcSendMsg';
+
+    if (args.type == 'start') {
+      // 每隔1秒，向前端页面发送消息
+      // 用定时器模拟
+      myTimer = setInterval(function(e, c, msg) {
+        let timeNow = Date.now();
+        let data = msg + ':' + timeNow;
+        e.reply(`${c}`, data)
+      }, 1000, event, channel, args.content)
+
+      return '开始了'
+    } else if (args.type == 'end') {
+      clearInterval(myTimer);
+      return '停止了'    
+    } else {
+      return 'ohther'
+    }
+  }
+
+  /**
+   * 测试接口
+   */ 
+  hello (args) {
+    console.log('hello ', args);
+  }   
 }
 
 module.exports = ExampleController;

frontend/src/api/main.js

@@ -7,10 +7,6 @@ const ipcApiRoute = {
   messageShowConfirm: 'controller.example.messageShowConfirm',
   selectFolder: 'controller.example.selectFolder',
   openDirectory: 'controller.example.openDirectory',
-  socketMessageStart: 'controller.example.socketMessageStart',
-  socketMessageStop: 'controller.example.socketMessageStop',
-  hello: 'controller.example.hello',
-  executeJS: 'controller.example.executeJS',
   loadViewContent: 'controller.example.loadViewContent',
   removeViewContent: 'controller.example.removeViewContent',
   createWindow: 'controller.example.createWindow',
@@ -30,6 +26,8 @@ const ipcApiRoute = {
   doSocketRequest: 'controller.example.doSocketRequest',
   ipcInvokeMsg: 'controller.example.ipcInvokeMsg',
   ipcSendSyncMsg: 'controller.example.ipcSendSyncMsg',
+  ipcSendMsg: 'controller.example.ipcSendMsg',
+  hello: 'controller.example.hello',
 }
 
 const specialIpcRoute = {

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

@@ -30,42 +30,14 @@
     </div>        
     <div class="one-block-1">
       <span>
-        1. 渲染进程与主进程IPC通信
-      </span>
-    </div>  
-    <div class="one-block-2">
-      <a-list bordered>
-        <a-input-search v-model="content" @search="helloHandle">
-          <a-button slot="enterButton">
-            send
-          </a-button>
-        </a-input-search>
-      </a-list>
-    </div>
-    <div class="one-block-1">
-      <span>
-        2. 主进程API执行网页函数
-      </span>
-    </div>  
-    <div class="one-block-2">
-      <a-list bordered>
-        <a-input-search v-model="content2" @search="executeJSHandle">
-          <a-button slot="enterButton">
-            send
-          </a-button>
-        </a-input-search>
-      </a-list>
-    </div>
-    <div class="one-block-1">
-      <span>
         3. 长消息： 服务端持续向前端页面发消息
       </span>
     </div>  
     <div class="one-block-2">
       <a-space>
-        <a-button @click="socketMsgStart">开始</a-button>
-        <a-button @click="socketMsgStop">结束</a-button>
-        结果：{{ socketMessageString }}
+        <a-button @click="sendMsgStart">开始</a-button>
+        <a-button @click="sendMsgStop">结束</a-button>
+        结果：{{ messageString }}
       </a-space>
     </div>  
   </div>
@@ -75,10 +47,7 @@ import { ipcApiRoute } from '@/api/main'
 export default {
   data() {
     return {
-      content: 'hello',
-      content2: 'hello world',
-      reply: '',
-      socketMessageString: '',
+      messageString: '',
       message1: '',
       message2: '',
       message3: ''
@@ -91,34 +60,28 @@ export default {
     init () {
       const self = this;
       // 避免重复监听，或者将 on 功能写到一个统一的地方，只加载一次
-      this.$ipc.removeAllListeners(ipcApiRoute.socketMessageStart);
-      this.$ipc.removeAllListeners(ipcApiRoute.socketMessageStop);
+      this.$ipc.removeAllListeners(ipcApiRoute.ipcSendMsg);
+      this.$ipc.on(ipcApiRoute.ipcSendMsg, (event, result) => {
+        console.log('[ipcRenderer] [socketMsgStart] result:', result);
 
-      this.$ipc.on(ipcApiRoute.socketMessageStart, (event, result) => {
-        console.log('[ipcRenderer] [socketMsgStart] result:', result)
-        self.socketMessageString = result;
+        self.messageString = result;
+        // 调用后端的另一个接口
+        event.sender.send(ipcApiRoute.hello, 'electron-egg');
       })
-      this.$ipc.on(ipcApiRoute.socketMessageStop, (event, result) => {
-        console.log('[ipcRenderer] [socketMsgStop] result:', result)
-        self.socketMessageString = result;
-      })
-    },
-    helloHandle(value) {
-      const self = this;
-      this.$ipcCall(ipcApiRoute.hello, value).then(r => {
-        self.$message.info(r);
-      })
-    },
-    executeJSHandle(value) {
-      this.$ipcCall(ipcApiRoute.executeJS, value).then(r => {
-        console.log(r);
-      })      
     },
-    socketMsgStart() {
-      this.$ipc.send(ipcApiRoute.socketMessageStart, '时间')
+    sendMsgStart() {
+      const params = {
+        type: 'start',
+        content: '开始'
+      }
+      this.$ipc.send(ipcApiRoute.ipcSendMsg, params)
     },
-    socketMsgStop() {
-      this.$ipc.send(ipcApiRoute.socketMessageStop, '')
+    sendMsgStop() {
+      const params = {
+        type: 'end',
+        content: ''
+      }
+      this.$ipc.send(ipcApiRoute.ipcSendMsg, params)
     },
     handleInvoke () {
       const self = this;