子窗口通信

electron/config/config.default.js

@@ -53,7 +53,7 @@ module.exports = (appInfo) => {
     minHeight: 650,
     webPreferences: {
       //webSecurity: false, // 跨域问题 -> 打开注释
-      contextIsolation: false, // false -> 可在渲染进程中使用electronApi，true->需要bridge.js(contextBridge)
+      contextIsolation: false, // false -> 可在渲染进程中使用electron的api，true->需要bridge.js(contextBridge)
       nodeIntegration: true,
       //preload: path.join(appInfo.baseDir, 'preload', 'bridge.js'),
     },

electron/controller/example.js

@@ -210,15 +210,32 @@ class ExampleController extends Controller {
     let content = null;
     if (args.type == 'html') {
       content = path.join('file://', electronApp.getAppPath(), args.content)
-    } else {
+    } else if (args.type == 'web') {
       content = args.content;
+    } else if (args.type == 'vue') {
+      let addr = 'http://localhost:8080'
+      if (this.config.env == 'prod') {
+        const mainServer = this.app.config.mainServer;
+        addr = mainServer.protocol + mainServer.host + ':' + mainServer.port;
+      }
+
+      content = addr + args.content;
+    } else {
+      // some
     }
 
+    console.log('url:', content);
+
     let winObj = new BrowserWindow({
       x: 10,
       y: 10,
       width: 980, 
-      height: 650 
+      height: 650,
+      title: 'new window',
+      webPreferences: {
+        contextIsolation: false,
+        nodeIntegration: true,
+      },
     })
     winObj.loadURL(content);
 

frontend/src/config/router.config.js

@@ -4,6 +4,11 @@
  */
 import {AppSider, Menu} from '@/layouts'
 
+const RouteView = {
+  name: 'RouteView',
+  render: h => h('router-view')
+}
+
 export const constantRouterMap = [
   {
     path: '/',
@@ -113,5 +118,17 @@ export const constantRouterMap = [
         ] 
       }
     ]
-  }
+  },
+  {
+    path: '/special',
+    component: RouteView,
+    //redirect: '/special/subwindow',
+    children: [
+      {
+        path: 'subwindow',
+        name: 'SpecialSubwindowIpc',
+        component: () => import('@/views/special/subwindow/Ipc')
+      }
+    ]
+  },
 ]

frontend/src/views/base/window/Index.vue

@@ -20,6 +20,16 @@
         <a-button @click="createWindow(1)">打开html页面</a-button>
       </a-space>
     </div>
+    <div class="one-block-1">
+      <span>
+        3. 新窗口中加载当前项目页面
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="createWindow(2)">打开vue页面</a-button>
+      </a-space>
+    </div>    
   </div>
 </template>
 <script>
@@ -36,7 +46,11 @@ export default {
         {
           type: 'html',
           content: '/public/html/view_example.html'
-        },        
+        },
+        {
+          type: 'vue',
+          content: '/special/subwindow'
+        },    
       ],
     };
   },

frontend/src/views/special/subwindow/HttpServer.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="app-base-httpserver">
+    <div class="one-block-1">
+      <span>
+        1. 内置http server服务
+      </span>
+    </div>
+    <div class="one-block-2">
+      <a-space>
+        <p>* 状态：{{ currentStatus }}</p>
+      </a-space>
+      <p>* 地址：{{ servicAddress }}</p>
+    </div>
+    <div class="one-block-1">
+      <span>
+        2. 发送请求
+      </span>
+    </div>    
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="sendRequest('pictures')"> 打开【我的图片】 </a-button>
+      </a-space>
+    </div>
+  </div>
+</template>
+<script>
+import storage from 'store2'
+import { ipcApiRoute, requestHttp } from '@/api/main'
+
+export default {
+  data() {
+    return {
+      currentStatus: '关闭',
+      servicAddress: '无'
+    };
+  },
+  mounted () {
+    this.init();
+  },
+  methods: {
+    init () {
+      const self = this;
+      this.$ipcInvoke(ipcApiRoute.checkHttpServer, {}).then(r => {
+        if (r.enable) {
+          self.currentStatus = '开启';
+          self.servicAddress = r.server;
+          storage.set('httpServiceConfig', r);
+        }
+      })
+    },
+    sendRequest (id) {
+      if (this.currentStatus == '关闭') {
+        this.$message.error('http服务未开启');
+        return;
+      }
+
+      const params = {
+        id: id
+      }
+      requestHttp(ipcApiRoute.doHttpRequest, params).then(res => {
+        //console.log('res:', res)
+      }) 
+    },  
+  }
+};
+</script>
+<style lang="less" scoped>
+#app-base-httpserver {
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>

frontend/src/views/special/subwindow/Ipc.vue

@@ -0,0 +1,118 @@
+<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>
+        3. 长消息： 服务端持续向前端页面发消息
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="sendMsgStart">开始</a-button>
+        <a-button @click="sendMsgStop">结束</a-button>
+        结果：{{ messageString }}
+      </a-space>
+    </div>  
+  </div>
+</template>
+<script>
+import { ipcApiRoute } from '@/api/main'
+export default {
+  data() {
+    return {
+      messageString: '',
+      message1: '',
+      message2: '',
+      message3: ''
+    }
+  },
+  mounted () {
+    this.init();
+  },
+  methods: {
+    init () {
+      const self = this;
+      // 避免重复监听，或者将 on 功能写到一个统一的地方，只加载一次
+      this.$ipc.removeAllListeners(ipcApiRoute.ipcSendMsg);
+      this.$ipc.on(ipcApiRoute.ipcSendMsg, (event, result) => {
+        console.log('[ipcRenderer] [socketMsgStart] result:', result);
+
+        self.messageString = result;
+        // 调用后端的另一个接口
+        event.sender.send(ipcApiRoute.hello, 'electron-egg');
+      })
+    },
+    sendMsgStart() {
+      const params = {
+        type: 'start',
+        content: '开始'
+      }
+      this.$ipc.send(ipcApiRoute.ipcSendMsg, params)
+    },
+    sendMsgStop() {
+      const params = {
+        type: 'end',
+        content: ''
+      }
+      this.$ipc.send(ipcApiRoute.ipcSendMsg, params)
+    },
+    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>
+<style lang="less" scoped>
+#app-base-socket-ipc {
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>

frontend/src/views/special/subwindow/SocketServer.vue

@@ -0,0 +1,77 @@
+<template>
+  <div id="app-base-httpserver">
+    <div class="one-block-1">
+      <span>
+        1. 内置socket-io server服务
+      </span>
+    </div>
+    <div class="one-block-2">
+      <a-space>
+        <p>* 状态：{{ currentStatus }}</p>
+      </a-space>
+      <p>* 地址：{{ servicAddress }}</p>
+    </div>
+    <div class="one-block-1">
+      <span>
+        2. 发送请求
+      </span>
+    </div>    
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="sendRequest('downloads')"> 打开【我的下载】 </a-button>
+      </a-space>
+    </div>
+  </div>
+</template>
+<script>
+import { io } from 'socket.io-client'
+import { ipcApiRoute, requestHttp } from '@/api/main'
+
+export default {
+  data() {
+    return {
+      currentStatus: '关闭',
+      servicAddress: 'ws://127.0.0.1:7070'
+    };
+  },
+  mounted () {
+    this.init();
+  },
+  methods: {
+    init () {
+      const self = this;
+      this.socket = io(this.servicAddress);
+      this.socket.on('connect', () => {
+        console.log('connect!!!!!!!!');
+        self.currentStatus = '开启';
+      });
+    },
+    sendRequest (id) {
+      if (this.currentStatus == '关闭') {
+        this.$message.error('socketio服务未开启');
+        return;
+      }
+
+      const method = ipcApiRoute.doSocketRequest; 
+      this.socket.emit('c1', { cmd: method, params: {id: id} }, (response) => {
+        // response为返回值
+        console.log('response:', response)
+      });
+    },  
+  }
+};
+</script>
+<style lang="less" scoped>
+#app-base-httpserver {
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>