前端业务层 通过以下三种方式通信,可根据需求搭配使用

  1. ipc
  2. http/https
  3. socket

    IPC

    优点:双向通信
    文件:前端引入ipcRender.js

    单向通信

    ```

    定义通信频道,即路由

    const ipcApiRoute = { hello: ‘controller.example.hello’, }

发送请求

该请求会访问 controller/example.js文件的hello函数

const self = this; this.$ipcInvoke(ipcApiRoute.hello, {name:’张三’}).then(r => { // r为返回的数据 conson.log(r); })

  1. <a name="ypSzR"></a>
  2. ### 双向通信

定义通信频道,即路由

const ipcApiRoute = { ipcSendMsg: ‘controller.example.ipcSendMsg’, }

// 避免重复监听,或者将 $ipc.on() 功能写到一个统一的地方,只加载一次 this.$ipc.removeAllListeners(ipcApiRoute.ipcSendMsg);

// 监听,接收 服务端 event.reply()发送的数据 this.$ipc.on(ipcApiRoute.ipcSendMsg, (event, result) => { console.log(‘[ipcRenderer] [ipcSendMsg] result:’, result);

  1. self.messageString = result;
  2. // 调用后端的另一个接口
  3. event.sender.send(ipcApiRoute.hello, 'electron-egg');

})

// 发送请求到服务端 this.$ipc.send(ipcApiRoute.ipcSendMsg, ‘参数’)

  1. <a name="Nka8N"></a>
  2. ### 预加载模块通信

向前端发消息

// 频道 const channel = ‘controller.example.ipcSendMsg’; // 使用主窗口的 webContents.send() 方法 eeApp.mainWindow.webContents.send(channel, {name:’张三’});

  1. electron ipc通信文档<br />ipcMain: [https://www.electronjs.org/zh/docs/latest/api/ipc-main](https://www.electronjs.org/zh/docs/latest/api/ipc-main)<br />ipcRenderer: [https://www.electronjs.org/zh/docs/latest/api/ipc-renderer](https://www.electronjs.org/zh/docs/latest/api/ipc-renderer)
  2. <a name="oh5xv"></a>
  3. ## HTTP/HTTPS
  4. 优点:可在前端、浏览器、终端命令(curl)等,跨界访问EE程序<br />生成ssl证书:[https://www.yuque.com/u34495/mivcfg/fppcdv](https://www.yuque.com/u34495/mivcfg/fppcdv)
  5. <a name="YaMDh"></a>
  6. ### 打开配置文件

/ 内置http服务 / config.httpServer = { enable: false, // 是否启用 https: { enable: false, key: ‘/public/ssl/localhost+1.key’, // key文件 cert: ‘/public/ssl/localhost+1.pem’ // cert文件 },
port: 7071, // 默认端口(如果端口被使用,则随机获取一个) cors: { origin: “*” // 跨域 }, body: { multipart: true, formidable: { keepExtensions: true } }
};

  1. <a name="DS7Sc"></a>
  2. #### cors属性
  3. - origin
  4. 配置 Access-Control-Allow-Origin CORS header,字符串 或 函数, 它将ctx作为第一个参数
  5. - exposeHeaders
  6. 配置 Access-Control-Expose-Headers CORS header,类型:Array
  7. - maxAge
  8. 配置 Access-Control-Max-Age CORS header,类型:Number
  9. - credentials
  10. 配置 Access-Control-Allow-Credentials CORS header. 类型:Boolean.
  11. - allowMethods
  12. 配置 Access-Control-Allow-Methods CORS header. 类型:array ,默认值 ['GET', 'PUT', 'POST', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS']
  13. - allowHeaders
  14. 配置 Access-Control-Allow-Headers CORS header. 类型:Array

{ origin: function(ctx) { if (ctx.url === ‘/test’) { return false; } return ‘*’; }, exposeHeaders: [‘WWW-Authenticate’, ‘Server-Authorization’], maxAge: 5, credentials: true, allowMethods: [‘GET’, ‘POST’, ‘DELETE’], allowHeaders: [‘Content-Type’, ‘Authorization’, ‘Accept’], }

  1. <a name="pCuWy"></a>
  2. #### body属性
  3. - patchNode {Boolean} 将请求body修补到Node's ctx.req,默认值:false
  4. - patchKoa {Boolean} 将请求body修补到 Koa's ctx.request, 默认值:true
  5. - jsonLimit {String|Integer} JSON body大小限制,默认值:1mb
  6. - formLimit {String|Integer} form body大小限制,默认值:56kb
  7. - textLimit {String|Integer} text body大小限制,默认值:56kb
  8. - encoding {String} 设置传入表单字段的编码,默认值:utf-8
  9. - multipart {Boolean} 解析 multipart bodies,默认值:false
  10. - urlencoded {Boolean} 解析 urlencoded bodies,默认值:true
  11. - text {Boolean} 解析 text bodies,比如 XML,默认值:true
  12. - json {Boolean} 解析 JSON bodies,默认值:true
  13. - jsonStrict {Boolean} 切换 co-body 严格模式;如果设为 true - 仅仅解析 arrays 或 objects,默认值:true
  14. - includeUnparsed {Boolean} 切换 co-body returnRawBody 选项; 如果设为 true, 对于表单编码和JSON请求原始,未解析的 body 使用Symbol 被连接到 ctx.request.body,默认值:false
  15. - **formidable** {Object} 见下方
  16. - onError {Function} 自定义错误句柄,如果抛出错误,可以自定义响应 - onError(error, context), 默认值将抛出
  17. - strict {Boolean} DEPRECATED If enabled, 不解析 GET, HEAD, DELETE 请求,默认值:true
  18. - parsedMethods {String[]} 声明将在其中解析实体的HTTP方法,默认值:['POST', 'PUT', 'PATCH']. 替换 strict 选项**关于**
  19. **关于 formidable 对象**
  20. - maxFields {Integer} 限制querystring解析器将解码的字段数,默认值:1000
  21. - maxFieldsSize {Integer} 限制所有字段(文件除外)可以以字节为单位分配的内存量,如果超过此值,一个 'error' 事件将被触发,默认值:2mb (2 * 1024 * 1024)
  22. - uploadDir {String} 设置用于放置文件上载的目录, 默认值:os.tmpDir()
  23. - keepExtensions {Boolean} 写入uploadDir的文件将包括原始文件的扩展名,默认值:false
  24. - hashAlgorithm {String} 如果要计算传入文件的校验和,将其设置为“sha1”或“md5”,默认值:false
  25. - multiples {Boolean} 是否上载多个文件,默认值:true
  26. - onFileBegin {Function} 文件开始时的特殊回调。改函数将通过 formidable执行,它可以用于在将文件保存到磁盘之前重命名文件。
  27. <a name="REbfv"></a>
  28. ### 使用方法

前端,项目中有demo

终端命令,如

curl http://127.0.0.1:7071/controller/example/doHttpRequest?id=pictures

浏览器

http://127.0.0.1:7071/controller/example/doHttpRequest?id=pictures

  1. <a name="twLjP"></a>
  2. ## socket
  3. 优点:双向通信
  4. <a name="Jg9Y1"></a>
  5. ### 打开配置文件

/ 内置socket服务 / config.socketServer = { enable: false, // 是否启用 port: 7070, // 默认端口(如果端口被使用,则随机获取一个) path: “/socket.io/“, // 默认路径名称 connectTimeout: 45000, // 客户端连接超时时间 pingTimeout: 30000, // 心跳检测超时时间 pingInterval: 25000, // 心跳检测间隔 maxHttpBufferSize: 1e8, // 每条消息的数据最大值 1M transports: [“polling”, “websocket”], // http轮询和websocket cors: { origin: true, // http协议时,要设置允许跨域 } };

  1. <a name="cjZbB"></a>
  2. ### 使用方法
  3. <a name="uLmjR"></a>
  4. #### 方式一
  5. 在前端调用,访问electron业务层

vue

import { io } from ‘socket.io-client’

export default { data() { return {}; }, mounted() { // socket支持http协议和websocket协议 // 推荐使用websocket const url = ‘ws://127.0.0.1:’ + port; // config中配置的端口 this.socket = io(url, { transports: [“websocket”] }); this.socket.on(‘connect’, () => { console.log(‘connect!!!!!!!!’); }); }, methods: { send() { const channel = ‘c1’; // 通信频道固定 const method = ‘controller.example.hello’; // EE框架中,控制器中的方法 this.socket.emit(channel, { cmd: method, params: 1 }, (response) => { // response为返回值 console.log(‘response:’, response) }); } } };

  1. <a name="N2kCm"></a>
  2. #### 方法二
  3. 在其它node.js项目中使用socket.io与EE框架通信

第三方项目引入socket客户端

const Client = require(‘socket.io-client’);

// socket支持http协议和websocket协议 // 推荐使用websocket const url = ‘http://127.0.0.1:’ + port;// config中配置的端口 const cObj = Client(url);

const channel = ‘c1’; // 通信频道固定 const method = ‘controller.example.hello’; // EE框架中,控制器中的方法 cObj.emit(channel, { cmd: method, params: 1 }, (response) => { // response为返回值 }); ```

方法三

其它语言的网络模块大同小异,监听通信地址即可