无法使用 React js socket.io-client 工作获取 Flask 套接字 io

Question

我浪费了 2 天的时间试图让 Flask socket io 与 React js socket.io-client 一起工作。我尝试在 stackoverflow 上搜索类似的问题，尽管我找到了它们并尝试了那里发布的建议，但它不起作用。

以下是Flask和Flask-SocketIO的版本

Package                   Version
------------------------- ------------
aniso8601                 9.0.1
APScheduler               3.10.4
attrs                     23.1.0
bidict                    0.22.1
blinker                   1.7.0
cachelib                  0.9.0
certifi                   2023.11.17
cffi                      1.16.0
charset-normalizer        3.3.2
click                     8.1.7
colorama                  0.4.6
flasgger                  0.9.7.1
Flask                     3.0.0
Flask-Caching             2.1.0
Flask-Cors                4.0.0
Flask-JWT-Extended        4.5.3
Flask-RESTful             0.3.10
Flask-SocketIO            5.3.6
Flask-SQLAlchemy          3.1.1
gevent                    23.9.1
gevent-websocket          0.10.1
greenlet                  3.0.1
h11                       0.14.0
idna                      3.6
itsdangerous              2.1.2
Jinja2                    3.1.2
jsonschema                4.20.0
jsonschema-specifications 2023.11.2
MarkupSafe                2.1.3
mistune                   3.0.2
oauthlib                  3.2.2
packaging                 23.2
pycparser                 2.21
PyJWT                     2.8.0
python-engineio           4.8.2
python-socketio           5.11.0
pytz                      2023.3.post1
PyYAML                    6.0.1
referencing               0.32.0
requests                  2.31.0
requests-oauthlib         1.3.1
rpds-py                   0.13.2
schedule                  1.2.1
scheduler                 0.8.5
simple-websocket          1.0.0
six                       1.16.0
SQLAlchemy                2.0.23
typeguard                 4.1.5
typing_extensions         4.8.0
tzdata                    2023.3
tzlocal                   5.2
urllib3                   2.1.0
Werkzeug                  3.0.1
wsproto                   1.2.0
zope.event                5.0
zope.interface            6.1

下面是服务器端代码，run.py

from app import create_app, db
from threading import Lock
from flask import Flask, render_template, session, request, \
    copy_current_request_context
from flask_socketio import SocketIO, emit, disconnect
from flask_cors import CORS

async_mode = None
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
CORS(app, resources={r"/*": {"origins": "*"}})
socketio = SocketIO(app, cors_allowed_origins="*")
count = 0

app = create_app()


@socketio.on("connect")
def connected():
    """event listener when client connects to the server"""
    print("client has connected")
    emit("connect", {"data": f"It is connected"})


if __name__ == '__main__':
    with app.app_context():
        db.create_all()
    # app.run(port=8080, debug=True)
    socketio.run(app, port=8080, debug=True)

下面是带有socket.io-client版本的react js

    "react": "^18.2.0",
    "react-apexcharts": "^1.4.1",
    "react-beautiful-dnd": "^13.1.1",
    "react-bootstrap": "^2.9.1",
    "react-date-range": "^1.4.0",
    "react-daterange-picker": "^2.0.1",
    "react-dom": "^18.2.0",
    "react-form-stepper": "^2.0.3",
    "react-gauge-chart": "^0.4.1",
    "react-helmet": "^6.1.0",
    "react-moment": "^1.1.3",
    "react-pro-sidebar": "^1.1.0-alpha.1",
    "react-router-dom": "^6.19.0",
    "react-scripts": "5.0.1",
    "socket.io-client": "^4.5.1",
    "uuid": "^9.0.1",
    "web-vitals": "^2.1.4"

下面是连接服务器的客户端代码

useEffect(() => {

    socket = io('localhost:8080',
        {
            extraHeaders: {
                "X-API-KEY": 'secret',
                "X-APP-NAME": 'testapp'
            }
        },
        {
            cors: {
              origin: "http://localhost:3000/",
            },
        }
    );
    console.log(socket);
    socket.on('connect', () => {
        console.log("Connected!");
    });

    // when connected, look for when the server emits the updated count
    socket.on('counter updated', function(countFromServer) {
      // set the new count on the client
      setCount(countFromServer);
    })

  }, []);

当我在浏览器控制台中查看套接字对象值时，已连接显示为“false”。

有人可以帮我解释一下吗？

Answer 1

不知道我的经历是否和你一样，但我有类似的经历。这不是修复，而是一种解决方法。最新安装的flask和flask-socketio（python 3.11）和react来自

npx 创建反应应用程序

加上安装socket.io-client。我在烧瓶中设置了最低限度并做出反应以建立 ws 连接。运行此命令会导致客户端 websocket 不断连接到 Flask（或 Flask 未完成连接），并在 chrome 中出现连接错误，并且客户端永远不会说已连接。

我从此处引用的存储库中获取了 package-lock.json websocket-app 删除并使用

重建了节点模块

npm 我反应脚本

并且网络套接字连接正确。

现在太沮丧了，无法弄清楚是什么依赖性导致了问题。