简介

Question

简介

你们中的大多数人可能会问“为什么？”，为什么我要这样做呢？原因是，最初我是用Nuxtjs + expressjs创建该项目的。但是我的项目经理希望我不要将源代码分发给我们的客户，因此我决定将代码与电子捆绑到一个.exe文件中。我尝试使用pkg，但无法弄清楚如何完全编译所有内容。

问题

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

ServiceUnavailableError: Response timeout
    at IncomingMessage.<anonymous> (C:\Users\LIANG-~1\AppData\Local\Temp\nscAD47.tmp\app\resources\app.asar\node_modules\connect-timeout\index.js:84:8)
    at IncomingMessage.emit (events.js:182:13)
    at IncomingMessage.EventEmitter.emit (domain.js:442:20)
    at Timeout._onTimeout (C:\Users\LIANG-~1\AppData\Local\Temp\nscAD47.tmp\app\resources\app.asar\node_modules\connect-timeout\index.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将文件复制到具有专用IP 192.168.0.105的另一台计算机上（从该服务器访问网页会出现上述错误）。

使用的技术

我正在使用的技术是nuxt.js created with express template，socket.io和vue-socket.io-extended。

我尝试过的

我尝试检查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 })
}

我现在有什么

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

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是环境变量名称。

socket.io-client

简介

问题

使用的技术

我尝试过的

我现在有什么

2 个答案: