Proxy config for websockets

[boriscy]

I’m using phoenix/framework and importing the phoenix socket in one of my modules

import {Socket} from ‘phoenix’

but I have problems with the proxy conf.

  dev: {
    env: require('./dev.env'),
    cssSourceMap: true,
    // auto open browser or not
    //openBrowser: true,
    publicPath: '/',
    port: 8080,
    // Proxy your API if using any.
    // Also see /build/script.dev.js and search for "proxy api requests"
    // https://github.com/chimurai/http-proxy-middleware
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://localhost:4000/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/uploads': {
        target: 'http://localhost:4000',
        changeOrigin: true
      },
      '/socket': {
        target: 'ws://localhost:4000/socket/websocket?vsn=1.0.0',
        changeOrigin: true
      }
    }
  }

I have changed the line to target: 'ws://localhost:4000/socket and didn’t work what I’m doing wrong?, it works fine for the other http routes.

[rstoenescu]

When using a socket, according to the http-proxy-middleware documentation (https://github.com/chimurai/http-proxy-middleware#websocket) you need to also set ws prop to true. Something like:

'/socket': {
     target: 'ws://localhost:4000/socket/websocket?vsn=1.0.0',
     changeOrigin: true,
     ws: true
 }

[boriscy]

did not work, How can I define in the config settings that later can be accessed in my app, for example

window.socketPath = readEnv('socketPath')

and this could work both for prod and dev

[rstoenescu]

@boriscy don’t know what you’re actually trying to do, but if the link didn’t help (https://github.com/chimurai/http-proxy-middleware#websocket) then I suggest opening them a ticket or using their forum/gitter channel (if they have one). This is a pure webpack issue. There’s nothing specific to Quasar regarding this when compared to any other Vue app.

[boriscy]

Thanks, fixed with this code that might not be the correct way but works

if(process.env.NODE_ENV == 'development') {
  window.wsPath = 'ws://localhost:4000/socket/websocket?vsn=1.0.0'
} else {
  window.wsPath = 'ws://acasiton.com/socket/websocket?vsn=1.0.0'
}

[rstoenescu]

Off the subject, but if you are using latest starter kit you can write if (DEV) or if (PROD)

[boriscy]

@rstoenescu Excellent tip, way better to write

if(DEV) {
  window.wsPath = 'ws://localhost:4000/socket/websocket?vsn=1.0.0'
}
if(PROD) {
  window.wsPath = 'ws://acasito.com/socket/websocket?vsn=1.0.0'
}