Socket-IO 使用 Polling 而不是 Websocket

Question

我正在开发一个应用程序，该应用程序在客户端使用 Vue.js Flask-SocketIO 服务器。问题是当应用程序部署在 NGINX 服务器（版本 1.21）上时，它总是使用轮询并且我不断收到以下请求：

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

然而，当我在本地部署应用程序时，websocket 使用得非常好，如下面的请求所示。

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

使用的库如下：

python-socketio 4.6.1
Flask-SocketIO 4.3.2
vue-socket.io3.0.10

以下是我的代码库：

客户端 (Vue.js)

import VueSocketIO from 'vue-socket.io'

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

服务器 (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 配置

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;
    }

我已尝试在客户端 (Vue.js) 文件中添加 transports: ['websocket'] 参数，但这会导致以下错误：

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

我更愿意使用实际的 Websockets，有人知道为什么 SocketIO 会退回到轮询吗？

Answer 1

修复

将 Flask-SocketIO 4.3.2 更新到最新版本并使用 vue-socket.io-extended 而不是 vue-socket.io

Socket-IO 使用 Polling 而不是 Websocket

Socket-IO is using Polling instead of Websocket

nginx

websocket

socket.io

vue.js

flask-socketio