title: Dynamic address for socket.io-client
body: <h1>Intro</h1>
  
  <p>Most of you will probably ask "Why?", why am I doing this stack? The reason is that initially I created the project in Nuxtjs + expressjs. But my PM wanted me to not distribute my source code to our client so I decided to bundle my code up into a single <code>.exe</code> file with electron. I tried using <code>pkg</code> but I couldn't figure out how to compile everything exactly.</p>
  
  <h2>The problem</h2>
  
  <p>The problem I am having with <code>socket.io-client</code> is that I want to be able to move the <code>exe</code> file to a different machine, and have socket.io connect to the socket.io server on that machine dynamically. Changing machines would mean that the IP of the server will be different, so whenever the user opens the webpage for that server, the socket.io-client would connect to the proper server. It works when I build the app from my current machine but when moved to lets say a VM then this is the response I get when I access the page:</p>
  
  <pre><code>ServiceUnavailableError: Response timeout
      at IncomingMessage.&lt;anonymous&gt; (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)
  </code></pre>
  
  <p>To further elaborate on what I am trying to do, lets say I compile the code on my current machine with the private IP of <code>192.168.0.104</code> (this runs perfectly), I want to move the <code>exe</code> file to another machine with the private IP of <code>192.168.0.105</code> (Accessing the webpage from this server gives the above error).</p>
  
  <h2>Technology used</h2>
  
  <p>The technology that I am using is <a href="https://github.com/nuxt-community/express-template" rel="nofollow noreferrer">nuxt.js created with express template</a>, <a href="https://socket.io/" rel="nofollow noreferrer">socket.io</a>, and <a href="https://github.com/probil/vue-socket.io-extended" rel="nofollow noreferrer">vue-socket.io-extended</a>.</p>
  
  <h1>What I have tried</h1>
  
  <p>I have tried checking for <code>reconnect</code> events or <code>timeout</code> events, when these events are triggered then I call <code>socket.connect(process.env.WS_URL)</code> which doesn't work. I believe that when I packaged the <code>electron app</code>, it makes the plugin data immutable. I couldn't figure out someway to change the URL to the address of the machine.</p>
  
  <pre><code>import Vue from 'vue'
  import io from 'socket.io-client'
  import VueSocketIO from 'vue-socket.io-extended'
  
  export default ({ store }) =&gt; {
    // process.env.WS_URL = 'http://192.168.0.12:3000'
    const socket = io(process.env.WS_URL, { transports: 'websocket' })
    socket.on('timeout', () =&gt; {
      socket.connect(process.env.WS_URL)
    })
    Vue.use(VueSocketIO, io(process.env.WS_URL, { transports: 'websocket' }), { store })
  }
  </code></pre>
  
  <h1>What I have right now</h1>
  
  <p>I created a socket.io plugin for <code>nuxtjs</code> to implement into my app, the plugin looks like this:</p>
  
  <pre><code>import Vue from 'vue'
  import io from 'socket.io-client'
  import VueSocketIO from 'vue-socket.io-extended'
  
  export default ({ store }) =&gt; {
    // process.env.WS_URL = 'http://192.168.0.12:3000'
    Vue.use(VueSocketIO, io(process.env.WS_URL, { transports: 'websocket' }), { store })
  }
  </code></pre>
  
  <p>I expect the <code>socket.io-client</code> to connect to the correct private IP of where the <code>exe</code> file is located. But <code>Request Timeout</code> is received, even though when I output the <code>process.env.WS_URL</code> is actually the new address.</p>
  
  <p>EDIT: After further testing, seems like the <code>socket.io</code> plugin is fixed, after the build process. So changing the <code>process.env.WS_URL</code> wouldn't have any effect. Is there a way to change the URL for socket.io even after nuxtjs finished building?</p>