add socket server demo

electron/controller/example.js

@@ -567,7 +567,20 @@ class ExampleController extends Controller {
     shell.openPath(dir);
     
     return true;
-  }  
+  } 
+ 
+  /**
+   * 一个socket io请求访问此方法
+   */ 
+  async doSocketRequest (args) {
+    if (!args.id) {
+      return false;
+    }
+    const dir = electronApp.getPath(args.id);
+    shell.openPath(dir);
+    
+    return true;
+  }    
 }
 
 module.exports = ExampleController;

frontend/package.json

@@ -11,6 +11,7 @@
     "ant-design-vue": "^1.7.8",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "socket.io-client": "^4.4.1",
     "store2": "^2.13.2",
     "vue": "^2.6.11",
     "vue-quill-editor": "^3.0.6",

frontend/src/api/main.js

@@ -26,7 +26,8 @@ const ipcApiRoute = {
   dbOperation: 'controller.example.dbOperation',
   uploadFile: 'controller.example.uploadFile',
   checkHttpServer: 'controller.example.checkHttpServer',
-  doHttpRequest: 'controller.example.doHttpRequest'
+  doHttpRequest: 'controller.example.doHttpRequest',
+  doSocketRequest: 'controller.example.doSocketRequest',
 }
 
 const specialIpcRoute = {

frontend/src/config/router.config.js

@@ -22,9 +22,9 @@ export const constantRouterMap = [
             component: () => import('@/views/base/file/Index')
           },
           {
-            path: '/base/socket/index',
-            name: 'BaseSocketIndex',
-            component: () => import('@/views/base/socket/Index')
+            path: '/base/socket/ipc',
+            name: 'BaseSocketIpc',
+            component: () => import('@/views/base/socket/Ipc')
           },
           {
             path: '/base/db/index',
@@ -67,11 +67,16 @@ export const constantRouterMap = [
             component: () => import('@/views/base/software/Index')
           },
           {
-            path: '/base/httpserver/index',
-            name: 'BaseHttpServerIndex',
-            component: () => import('@/views/base/httpserver/Index')
+            path: '/base/socket/httpserver',
+            name: 'BaseSocketHttpServer',
+            component: () => import('@/views/base/socket/HttpServer')
           },
           {
+            path: '/base/socket/socketserver',
+            name: 'BaseSocketSocketServer',
+            component: () => import('@/views/base/socket/SocketServer')
+          },          
+          {
             path: '/base/system/index',
             name: 'BaseSystemIndex',
             component: () => import('@/views/base/system/Index')

frontend/src/config/subMenu.js

@@ -12,11 +12,23 @@ export default {
 		'menu_300' : {
 			icon: 'profile',
 			title: '通信',
-			pageName: 'BaseSocketIndex',
+			pageName: 'BaseSocketIpc',
 			params: {}
 		},
 		'menu_301' : {
 			icon: 'profile',
+			title: 'http服务',
+			pageName: 'BaseSocketHttpServer',
+			params: {}
+		},
+		'menu_302' : {
+			icon: 'profile',
+			title: 'socket服务',
+			pageName: 'BaseSocketSocketServer',
+			params: {}
+		},    
+		'menu_310' : {
+			icon: 'profile',
 			title: '数据库',
 			pageName: 'BaseDBIndex',
 			params: {}
@@ -68,13 +80,7 @@ export default {
 			title: '软件调用',
 			pageName: 'BaseSoftwareIndex',
 			params: {}
-		},
-		'menu_510' : {
-			icon: 'profile',
-			title: 'http服务',
-			pageName: 'BaseHttpServerIndex',
-			params: {}
-		},
+		},		
 		'menu_900' : {
 			icon: 'profile',
 			title: '测试',

frontend/src/views/base/socket/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.$ipcCall(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/base/socket/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>

frontend/src/views/base/socketioserver/SocketServerIndex.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 = 'controller.example.hello'; 
+      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>