关于electron项目所遇到的小问题

221 阅读1分钟

在我一个electron项目准备打包的时候,后端打算放弃服务的形式,而是以exe的形式想要前端在开启的同时进行打开。

但是以exe的形式打开则会有诸如端口号被占用等问题,一开始想的办法是一开始设置一个初始的端口号,然后由前端使用--server.port=的方式来进行开启。开启后前端发送get请求来判断后端exe是否开启,如果没有开启,则前端更改端口并再次使用--server.port=来打开exe。

在这里我碰到了一个小问题,首先是如何判断当前被占用的端口是否是后端exe。

因此我更换了入口函数main.js的写法,在打开exe前先进行get请求的获取,然后在规定时间内没有获取到信息,则再对当前端口是否被占用进行判断,如果不被占用则可以进行打开的操作,否则将以选择其他端口再次进行此操作。

const runExec = () => {
  let exePath = path.join(__dirname,"../../../exe名称")
  exec(`start ${exePath}`);
}

这里是用到electron的child_process模块,进行子进程命令行的打开。打开之后便开始对后端是打开的状态进行轮询。

const backisStart = async () => {
  console.log('in start');
  const request = net.request({
    method: 'GET',
    url: `http://127.0.0.1:26714/connect`
  });
  const result = await new Promise((resolve) => {
    request.on('error', (err) => {
      console.log(err);
      resolve('wait');
    });
    request.on('response', (res) => {
      console.log(res);
      resolve('success')
    });
    request.end();
  })
  console.log('request', result);
  return result;
}

这里是使用了一个promise对后端开放的连接状态查询接口进行查询,当获取到确认信息之后,便进行下一步操作。

  if(await backisStart() === 'success'){
    mainWindow.loadFile('dist/index.html');
  } else {
    runExec();
    const timer = setInterval( async () => {
      if(await backisStart() === 'success') {
        mainWindow.loadFile('dist/index.html');
        clearInterval(timer);
      }
    },1000)
  }
}

当对后端开启的状态进行确认之后,便可对前端的界面进行打开。