时间戳

首页 > 解决方案 > socket.io-client 的动态地址

vue.js - socket.io-client 的动态地址

问题描述

介绍

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

问题

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

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)

为了进一步详细说明我正在尝试做的事情，假设我在当前机器上使用私有 IP 编译代码192.168.0.104（这运行完美），我想将exe文件移动到具有私有 IP 的另一台机器192.168.0.105（访问网页从这个服务器给出了上述错误）。

使用的技术

我使用的技术是使用express template、socket.io和vue-socket.io-extended创建的nuxt.js。

我试过的

我曾尝试检查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？

标签： vue.jssocket.ioelectronnuxt.js

解决方案

（我想对此发表评论，但我不能）

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

我将 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: false 在 vue-socket.io 插件的 nuxt 配置中。

推荐阅读