electron集成nodejs后端服务时使用随机端口

薛定喵君

发布于 2023-07-11 14:15:49

5100

发布于 2023-07-11 14:15:49

文章被收录于专栏：薛定喵君薛定喵君

记录如何在开发electron应用时使用随机端口

# 背景

最近使用electron-tabs开发小工具时遇到了测试用户提示端口冲突的问题。

因为工具是使用nodejs作为后端服务，并且指定了端口号，所以就存在与用户本地其它服务端口冲突的可能。

# 解决方法

在electron项目中启动nodejs服务可以通过直接require服务文件的方式，通过启动node服务时监听0端口就可以实现随机端口号，但是随机出来的端口如何获取到并在渲染进程中使用呢。

我们需要进行如下改造：

在nodejs服务主程序中另写一个promise函数监听端口0来启动服务：

server.listen(0)可以实现自动分配端口

let port = 0
class AppServer {
  start() {
    return new Promise((resolve, reject) => {
      let server = app.listen(0, function () {
        let host = server.address().address;
        port = server.address().port;
        console.log('address: http://localhost:%s', port);
        resolve(port);
      });
    })
  }
}
module.exports = AppServer;

然后在electron的主进程main.js中引用noe服务并await方式调用node服务的启动函数，注意将端口号拼接在窗口加载url中。

let AppServer = require('../server');
const appServer = new AppServer();
const port = await appServer.start();
mainWindow.loadURL("file://" + __dirname + "/electron-tabs.html?" + port);

页面上获取端口号：通过location.href来获取。

const port = location.href.split('?')[1]
const tabGroup = document.querySelector("tab-group");
tabGroup.on("ready", () => console.info("TabGroup is ready"));

tabGroup.setDefaultTab({
  title: "demo",
  src: "http://localhost:" + port + "/test.html",
  ready: () => console.info("New Tab is ready"),
});