当前位置: 首页 > 工具软件 > electron-egg > 使用案例 >

electron-egg 通信

戚宏浚
2023-12-01

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

  1. ipc
  2. http
  3. socket

IPC

优点:双向通信

  • 单向通信
# 定义通信频道,即路由
const ipcApiRoute = {
  hello: 'controller.example.hello',
}

# 发送请求
# 该请求会访问 controller/example.js文件的hello函数
const self = this;
this.$ipcCall(ipcApiRoute.hello, {name:'张三'}).then(r => {
	// r为返回的数据
  conson.log(r);
})
  • 双向通信
# 定义通信频道,即路由
const ipcApiRoute = {
  socketMessage: 'controller.example.socketMessage',
}

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

// 监听,接收 服务端 event.reply()发送的数据
this.$ipc.on(ipcApiRoute.socketMessage, (event, result) => {
  console.log('result:', result)
  // 继续通信
  event.sender.sendTo(event.senderId, ...)
  
})

// 发送请求到服务端
this.$ipc.send(ipcApiRoute.socketMessage, '参数')
  • 预加载模块通信
# 向前端发消息  
// 频道
const channel = 'controller.example.socketMessage';
// 使用主窗口的 webContents.send() 方法
eeApp.mainWindow.webContents.send(channel, {name:'张三'});

electron ipc通信文档

ipcMain: ipcMain | Electron

ipcRenderer: ipcRenderer | Electron

HTTP

优点:可在前端、浏览器、终端命令(curl)等,跨界访问EE程序

  • 打开配置文件
/* 内置http服务 */
config.httpServer = {
  enable: false, // 是否启用
  port: 7071, // 默认端口(如果端口被使用,则随机获取一个)
  cors: {
    origin: "*" // 跨域
  }
};
  • 使用方法
# 前端,项目中有demo

# 终端命令,如
curl http://127.0.0.1:7071/controller/example/doHttpRequest?id=pictures

# 浏览器
http://127.0.0.1:7071/controller/example/doHttpRequest?id=pictures

socket

优点:双向通信

  • 打开配置文件
  /* 内置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协议时,要设置允许跨域
    }
  };
  • 使用方法

  方式一:在前端调用,访问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)
      });
    }
  }
};

  方法二:在其它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为返回值
});

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

 类似资料: