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

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

# 背景

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

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

# 解决方法

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

我们需要进行如下改造：

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

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

代码语言：javascript复制

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中。

代码语言：javascript复制

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

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

代码语言：javascript复制

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"),
});

然后启动程序我们就可以在渲染的页面中获取到随机的端口号了。

# 参考资料

server.listen
electron-tabs

渲染 electron 服务后端进程

0 人点赞