记录如何在开发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中引用node服务并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"),
});
- 然后启动程序我们就可以在渲染的页面中获取到随机的端口号了。
