flask_socketio 連接到客戶端，但沒有收到消息

Question

我有一個 Flask 服務器應用程序/React 客戶端應用程序，我正在嘗試將 flask_socketio 集成到其中。 我已經從flask_socketio 文檔中復制了標准的介紹性示例，它在我的 React 前端工作得很好。

但是，當我嘗試在燒瓶中復制結果時，使用完全相同的步驟我無法發送或接收消息。 當我運行我的 Flask 應用程序時，我可以在輸出中看到客戶端已連接，並且在瀏覽器控制台中，我有一個 console.log 告訴我我已連接到服務器，但發出（或發送）似乎不起作用介紹示例的方式。

我安裝了 eventlet，文檔說flask_socketio 應該自動識別。 這里有一些代碼片段供參考。

應用程序/套接字/__ init __.py

from flask_socketio import SocketIO

socketio = SocketIO(cors_allowed_origins='http://localhost:3000')

應用程序/套接字/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)

應用程序/__初始化__.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)

應用程序/應用程序.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 的鏈接。 盡管如此，在如何解決問題方面仍然沒有進展。

已啟用socketio.init_app(app, async_mode="eventlet", engineio_logger=True)並在燒瓶中禁用調試以確保未使用 werkzeug。

Answer 1

一個類似的問題是相關的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