socket.io 客户端的动态地址

Question

Intro

你们中的大多数人可能会问"为什么？"，我为什么要做这个堆栈？原因是最初我用Nuxtjs + expressjs创建了项目。但是我的PM希望我不要将源代码分发给我们的客户，所以我决定将我的代码捆绑到一个带有电子的.exe文件中。我尝试使用pkg但我不知道如何准确编译所有内容。

问题所在

我对socket.io-client遇到的问题是我希望能够将exe文件移动到另一台计算机上，并且 socket.io 动态连接到该计算机上的 socket.io 服务器。更换机器意味着服务器的 IP 会有所不同，因此每当用户打开该服务器的网页时，socket.io 客户端都会连接到正确的服务器。当我从当前计算机构建应用程序时，它可以工作，但是当移动到虚拟机时，这是我访问页面时得到的响应：

ServiceUnavailableError: Response timeout
at IncomingMessage.<anonymous> (C:UsersLIANG-~1AppDataLocalTempnscAD47.tmpappresourcesapp.asarnode_modulesconnect-timeoutindex.js:84:8)
at IncomingMessage.emit (events.js:182:13)
at IncomingMessage.EventEmitter.emit (domain.js:442:20)
at Timeout._onTimeout (C:UsersLIANG-~1AppDataLocalTempnscAD47.tmpappresourcesapp.asarnode_modulesconnect-timeoutindex.js:49:11)
at ontimeout (timers.js:425:11)
at tryOnTimeout (timers.js:289:5)
at listOnTimeout (timers.js:252:5)
at Timer.processTimers (timers.js:212:10)

为了进一步详细说明我正在尝试做什么，假设我使用192.168.0.104的私有 IP 在当前机器上编译代码(运行完美)，我想将exe文件移动到另一台具有192.168.0.105私有 IP 的机器上(从此服务器访问网页会产生上述错误)。

使用的技术

我正在使用的技术是nuxt.js使用快速模板，socket.io 和vue-socket.io 扩展创建的。

我试过什么

我尝试检查reconnect事件或timeout事件，当这些事件被触发时，我调用socket.connect(process.env.WS_URL)不起作用。我相信当我打包electron app时，它使插件数据不可变。我想不出某种方法可以将URL更改为机器的地址。

import Vue from 'vue'
import io from 'socket.io-client'
import VueSocketIO from 'vue-socket.io-extended'
export default ({ store }) => {
// process.env.WS_URL = 'http://192.168.0.12:3000'
const socket = io(process.env.WS_URL, { transports: 'websocket' })
socket.on('timeout', () => {
socket.connect(process.env.WS_URL)
})
Vue.use(VueSocketIO, io(process.env.WS_URL, { transports: 'websocket' }), { store })
}

我现在拥有什么

我创建了一个 socket.io 插件供nuxtjs实现到我的应用程序中，该插件如下所示：

import Vue from 'vue'
import io from 'socket.io-client'
import VueSocketIO from 'vue-socket.io-extended'
export default ({ store }) => {
// process.env.WS_URL = 'http://192.168.0.12:3000'
Vue.use(VueSocketIO, io(process.env.WS_URL, { transports: 'websocket' }), { store })
}

我希望socket.io-client连接到exe文件所在的正确私有 IP。但是收到Request Timeout，即使当我输出时process.env.WS_URL实际上是新地址。

编辑：经过进一步测试，似乎在构建过程之后，socket.io插件已修复。因此，更改process.env.WS_URL不会产生任何影响。有没有办法即使在 nuxtjs 完成构建后更改 socket.io 的 URL？

Answer 1

(我想对此发表评论，但我不能)

无论如何，您确定编辑中的信息是真实的吗？

我使用Nuxt.js与Electron以及 vue-socket.io。我使用一个参数来调用可执行文件作为 socket.io 地址： 这是特定于电子的

global.sharedObject = { socketIOAddress: process.argv[1] }

这是我 vue-socket.io 的Nuxt插件文件：

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'
import { remote } from 'electron'
export default ({ store }) => {
Vue.use(new VueSocketIO({
debug: true,
connection: remote.getGlobal('sharedObject').socketIOAddress
vuex: {
store,
actionPrefix: 'SOCKET_',
mutationPrefix: 'SOCKET_'
}
})
)
}

因此，虽然代码可能不是您想要的，但Nuxt不必为它再次构建。也许在您尝试时环境变量没有正确更改？也许你也应该尝试一个论点。

同样重要的是：ssr：在 vue-socket.io 插件的nuxt配置中为false。

Answer 2

我想出的解决方案是使用环境变量。首先将变量设置为localhost:3000或任何服务器的本地地址。我会使用electron-store来保存我所有设置(包括服务器 IP)的config.json文件。在服务器启动之前，我读取了配置文件并更改了之前设置的服务器地址。然后我按如下方式使用它：

import Vue from 'vue'
import io from 'socket.io-client'
import VueSocketIO from 'vue-socket.io-extended'
export default ({ app, store }) => {
Vue.use(VueSocketIO, io(app.$env.WS_URL), { store })
}

注意：WS_URL是环境变量名称。