Question

我正在尝试使用SocketIO连接React App和Flask App，但遇到了我无法理解的问题。该应用程序很简单，因为如果您使用套接字在一个选项卡中单击颜色按钮，它将更改两个选项卡中页面的背景色。我对React和Flask的简单代码如下：

结构

frontend/src/App.js 
backend/__init__.py
backend/socket_listeners.py
manage.py

App.js

import React, { Component } from 'react';
import io from 'socket.io-client';
import axios from 'axios';
import './App.css';



class App extends Component {

   constructor(props){
      super(props);
      this.state = {
        color: ''
      };

      this.socket = io(`http://${document.domain}:5000`);

      this.socket.on('receive_change_color', (color) => {
         document.body.style.backgroundColor = color;
      });

   }

   send = (e) => {
     e.preventDefault();
     console.log("emitting", this.state.color);
     this.socket.emit('send_change_color', this.state.color);
   }

   setColor = (color) => {
     this.setState({color: color});
   }

   componentDidMount() {
      axios.get("http://localhost:5000/sample")
       .then((res) => {
        console.log(res);
      })
      .catch((e) => {
        console.log(e);
      });
   }

  render() {

      return (
         <div style={{ textAlign: "center"}}>
            <button onClick={(e) => this.send(e)}>Change color</button>
            <button id="blue" onClick={()=>this.setColor('blue')}>Blue</button>
            <button id="red" onClick={() => this.setColor('red')}>Red</button>
         </div>
      );
    }
 }

export default App;

__ init __。py

from flask import Flask
from flask_cors import CORS
from backend.controllers.api import api
from backend import assets
from backend.models import db

from backend.extensions import (
    cache,
    debug_toolbar,
    login_manager,
    migrate,
)

def create_app(object_name):
    app = Flask(__name__)
    app.config.from_object(object_name)
    CORS(app, resources={r"/*":{"origins":"*"}})
    cache.init_app(app)
    debug_toolbar.init_app(app)
    db.init_app(app)
    migrate.init_app(app, db)
    login_manager.init_app(app)
    app.register_blueprint(api)
    return app

socket_listeners.py

import os
from backend import create_app
from flask_socketio import  SocketIO, join_room, leave_room, emit

env = os.environ.get('BACKEND_ENV', 'dev')
app = create_app('backend.settings.%sConfig' % env.capitalize())

socketio = SocketIO(app)

@socketio.on('connect')
def connect():
   emit('connect', {'data': "sample"})

@socketio.on('disconnect')
def disconnect():
   print("Disconnected to socket!")

@socketio.on('send_change_color')
def change_color(color):
    print("Color: ", color)
    emit('receive_change_color', color) **this doesnt work**
    # socketio.emit('receive_change_color', color) **this works**

manage.py

#!/usr/bin/env python
import os
from flask import current_app
from flask_script import Manager, Server
from flask_script.commands import ShowUrls, Clean
from flask_migrate import MigrateCommand
from backend.socket_listeners import socketio, app
from flask_socketio import join_room, leave_room, emit
from backend import create_app
from backend.models import db, User

manager = Manager(app)
manager.add_command("server", Server(threaded=True))
manager.add_command("show-urls", ShowUrls())
manager.add_command("clean", Clean())
manager.add_command("db", MigrateCommand)

@manager.shell
def make_shell_context():
   return dict(app=app, db=db, User=User)

@manager.command
def createdb():
    db.drop_all()
    db.create_all()

@manager.command
def runsocket():
    socketio.run(
       app,
       host="0.0.0.0"
    )

if __name__ == "__main__":
    manager.run()

如 socket_listeners.py 中所示， change_color 函数socketio.emit（）中的最后一行有效，但上方的行无效。根据文档的emit（）方法应该可以直接使用，但是我无法在UI上更改颜色或直接使用emit（）方法发出recieve_change_color。

有什么想法我在这里想念什么吗？

Flask-SocketIO无法直接使用emit（）函数发出事件

0 个答案: