python - 未建立从 react socket-io 客户端到 flask-socket-io 服务器的连接以进行实时更新

问题描述

仅出于学习目的，我正在尝试使用 SOCKET.io 在 react 和 flask 之间建立连接 以获取实时更新。

但是，遗憾的是，到目前为止，我无法在客户端 socket.io 和服务器 socket.io 之间建立连接。

我关注了几个博客并探索了 GitHub 问题，但没有一个对我有帮助。

代码

1.反应代码

    import React, { useState, useEffect } from "react";
    import socketIOClient from "socket.io-client";
    import io from "socket.io-client/dist/socket.io";
    import "./App.css";
    
    const ENDPOINT = "http://127.0.0.1:5000";
    
    function App() {
      const [data, setData] = useState("");
    
      const setRecords = (response) => {
        console.log("response", response);
        setData(response.records);
      };
      useEffect(() => {
        // const socket = socketIOClient(ENDPOINT);   // >>>>> Not Working
        const socket = io.connect(ENDPOINT, { rejectUnauthorized: false }); //{ transports:["websocket"]}
        console.log("connected", socket);
        socket.on("success", (data) => console.log(data));
   
        // socket.on("FetchRecords");
        // socket.emit("FetchRecords");
        // socket.on("SendingRecords", setRecords);
    
        // socket.on("FromAPI", data => {
        //   setResponse(data);
        // });
      }, []);
      return (
        <div className="App">WEBSOCKET with FLASK and REACT...{data.length}</div>
      );
    }
    
    export default App;

现在，如果我在控制台中看到日志，则表明它正在断开连接。

2.后端代码

from flask import Flask, jsonify
from mongoConnect import todo
from flask_socketio import SocketIO, send, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app, cors_allowed_origins='*', engineio_logger=True)

@socketio.on('connect')
def test_connect():
    print('CONNECT EVENT happened...')
    emit('success', {'data': 'Connected'})


@socketio.on('FetchRecords')
def fetch_all_records():
    records = todo.find({})
    print('fetch_all_records', len(records))
    response = jsonify({'code': 200, 'records': records})
    print(response)
    emit('sendingRecords', response)


if __name__ == '__main__':
    socketio.run(app, port=5000)

后端日志（使用 geevent-websocket）

谁能告诉我我哪里出错了？奇怪的是，没有一个人像我一样遇到过问题……这是我检查过的博客和问题……

1. React Native：无法建立套接字连接
2. 带有 React 和 Flask 的简单聊天应用
3. Socket.IO、React 和 Node.js：走向实时

标签： pythonreactjsflasksocket.ioflask-socketio

python - 未建立从 react socket-io 客户端到 flask-socket-io 服务器的连接以进行实时更新

问题描述

解决方案

推荐阅读