我有一个Flask服务器应用程序/ React客户端应用程序,我试图将flask_socketio集成到其中。我已经复制了flask_socketio文档中的标准介绍性示例,并且可以在我的React前端正常工作。
但是,当我尝试在flask中复制结果时,使用完全相同的步骤无法发送或接收消息。运行烧瓶应用程序时,我可以看到客户端已连接输出,在浏览器控制台中,我有一个console.log告诉我我已连接到服务器,但发出(或发送)的消息似乎不起作用。介绍示例的方式。
我已经安装了eventlet,并且文档说flask_socketio应该自动识别此事件。以下是一些代码段供参考。
app / socket / __ init __。py
from flask_socketio import SocketIO
socketio = SocketIO(cors_allowed_origins='http://localhost:3000')
app / socket / socket.py
from flask_cors import cross_origin
from flask_socketio import send, emit
from . import socketio
@cross_origin
@socketio.on('connect')
def handle_connection():
print('a user has connected')
emit('mymessage', 'Hi client, I am server.') # I've tried `send` here too
@cross_origin
@socketio.on('mymessage')
def handle_message(message):
print('Message from client: ' + message)
app / __初始化__。py
from flask import Flask
from flask_cors import CORS
from .socket import socketio
def create_app():
app = Flask(__name__)
# Cross Origin Resource Sharing
CORS(app)
# Socket.IO
socketio.init_app(app)
return (socketio, app)
app / app.py
from . import create_app
socketio, app = create_app()
if __name__ == '__main__':
socketio.run(app, host='localhost', port=5000)
#app.run("0.0.0.0", port=5000, threaded=True, use_reloader=False)
反应成分
const socket = io('http://localhost:5000');
class Figures extends React.Component {
setSocketListeners () {
socket.on('connect', () => {
console.log('connected to socket');
socket.emit('mymessage', 'Hi server, I am client.');
})
socket.on('mymessage', function(data) {
console.log('Message from server: ' + data)
})
}
componentDidMount() {
this.setSocketListeners()
}
...
输出:
终端
* Restarting with stat
* Debugger is active!
* Debugger PIN: 216-814-307
(4089) wsgi starting up on http://127.0.0.1:5000
127.0.0.1 - - [14/Aug/2019 02:40:35] "POST /socket.io/?EIO=3&transport=polling&t=MoEsrSZ&sid=a4f73c34553f478cabde2f919b48fe98 HTTP/1.1" 200 219 0.002675
(4089) accepted ('127.0.0.1', 36512)
(4089) accepted ('127.0.0.1', 36514)
127.0.0.1 - - [14/Aug/2019 02:40:36] "GET /socket.io/?EIO=3&transport=polling&t=MoEsrSf&sid=a4f73c34553f478cabde2f919b48fe98 HTTP/1.1" 200 235 1.612156
浏览器
connected to socket
编辑:
初步调试似乎表明这是'create_app()'的问题。请参阅@miguelgrinberg的link。不过,如何解决此问题仍没有进展。
已启用socketio.init_app(app, async_mode="eventlet", engineio_logger=True)
,并在flask中禁用了调试,以确保未使用werkzeug。
答案 0 :(得分:0)
一个类似的问题与here
有关我认为您应该在前端代码上打开套接字时启用到WebSocket的传输模式,例如:
const socket = io('http://localhost:5000', {transports: [websocket]});
还需要安装gevent和gevent-websocket并导入socket.io-client,如下所示:
import io from 'socket.io-client/dist/socket.io';
我已经实现了一个工作示例:https://github.com/roj4s/webicami