1

I'm currently building a VueJS website that works with websockets, and I ran into an issue after adding a proxy for my websocket server (which uses Python|Flask)

Here's my proxy configuration (that works for the '/api') vite.config.ts :

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        host: true,
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:5000/api',
                changeOrigin: true,
                rewrite: path => path.replace(/^\/api/, '')
            },
            '/ws': {
                target: 'ws://127.0.0.1:5000',
                ws: true,
                changeOrigin: true,
                rewrite: path => path.replace(/^\/ws/, '')
            }    
        }
    }
})

Here's the code I use to attempt a connection :

// '/game' is the namespace I use.
const $socket = io('/ws/game', {
    path: '/websocket'
});
$socket.connect();

Here's my server-side python code (to initialize the websocket server with Flask-SocketIO) :

socket = SocketIO(
    app, 
    path = '/websocket',
    cors_allowed_origins = '*'
)

There's no error showing up, I just don't get the usual "Connected" message.

TheGabDooSan
  • 55
  • 1
  • 2
  • 8
  • In your vite.config.ts file, you set the path to '/websocket' when proxying the WebSocket server using Vite. However, when connecting to the server, you are passing path: '/websocket' to the io function. This means that the client-side code is attempting to connect to '/ws/game/websocket' instead of '/ws/game'. – bariskau Apr 10 '23 at 21:01
  • But '/websocket' is the path I specified on the server side, what should I fix ? – TheGabDooSan Apr 10 '23 at 21:31
  • The default path is '/socket.io' so even without it I'd still have '/ws/game/socket.io' – TheGabDooSan Apr 10 '23 at 21:34
  • I can help more if you tell me the client and server socket library versions. Also can you check this thread? https://github.com/miguelgrinberg/Flask-SocketIO/issues/302#issuecomment-426086713 – bariskau Apr 10 '23 at 21:49
  • Client : "socket.io-client": "^4.6.1" ; Server : "Flask-SocketIO==5.3.3" ; I checked the thread and still didn't succeed :( – TheGabDooSan Apr 10 '23 at 22:05
  • I tried with the following code : ```const $socket = io(`http://${location.hostname}:5000/game`, { path: '/websocket' });```. It works, but in order to make it work, I have to make the server accessible on 0.0.0.0, although I want it to stay local (as the app and the server will be running on the same server). – TheGabDooSan Apr 10 '23 at 22:08

0 Answers0