Proxy config for websockets



  • 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.


  • Admin

    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
     }
    


  • 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


  • Admin

    @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.



  • 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'
    }
    

  • Admin

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



  • @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'
    }
    

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.