Socket-IO is using Polling instead of Websocket

[talalz94]

I'm working on an application that uses Flask-SocketIO server with Vue.js on the client side. The issue is that when the app is deployed on NGINX server (version 1.21), it always uses polling and I keep getting following requests:

https://xyz.com/socket.io/?EIO=3&transport=polling&t=Nmo5P0n&sid=400eb01430964fc29b7b4cbf627b62aa

However when I deploy the application locally, the websocket are used perfectly fine as the below request suggests.

ws://localhost:10001/socket.io/?EIO=3&transport=websocket&sid=2858466e586040a58190577fa8a24546

Libraries used are following:

• python-socketio 4.6.1
• Flask-SocketIO 4.3.2
• vue-socket.io 3.0.10

• Following is my code base:

Client (Vue.js)

import VueSocketIO from 'vue-socket.io'
Vue.use(
    new VueSocketIO({
        debug: true,
        connection: 'http://localhost:10001',
        vuex: {
            store,
            actionPrefix: 'SOCKET_',
            mutationPrefix: 'SOCKET_',
        },
    })
)

Server (Vue.js)

from flask import Flask, request, session
from flask_socketio import SocketIO, emit
app = Flask(__name__)
socketio = SocketIO(app, cors_allowed_origins="*", logger=True, Threaded=True)
*App related code*
if __name__ == '__main__':
    socketio.run(app, host="0.0.0.0", port=10001, debug=False)

NGINX Config

location /socket.io {
        proxy_pass http://localhost:10001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header    X-Real-IP $remote_addr;
        proxy_cache_bypass $http_upgrade;
        add_header  Front-End-Https   on;
    }

I have tried adding the transports: ['websocket'] parameter in the client (Vue.js) file but that results in the following error:

WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400

I'd prefer to be using actual Websockets, does anyone know why SocketIO is falling back on polling?

[talalz94]

Fix: Updated Flask-SocketIO 4.3.2 to the latest version and used vue-socket.io-extended instead of vue-socket.io

[lyutian]

Specify the transports method in options can fix:

Vue.use(new VueSocketIO({
  debug: true,
  connection: 'http://localhost:8989',
  vuex: {
    store,
    actionPrefix: 'SOCKET_',
    mutationPrefix: 'SOCKET_'
  },
  options: { path: '/ws/socket.io', transports: ['websocket'] },
}))