Flask and Flask-SocketIO

Question

This seems like a very simple problem but it's got me confused nonetheless, I have a Flask application that serves up a webpage and communicates with that page via Socket.io. The Flask application looks like this:

app = Flask(__name__)
socketio = SocketIO(app)

@socketio.on_error()
def error_handler(e):
    print e

#this fires
@socketio.on("connect")
def connect():
    print "connected"

#this does not    
@socketio.on('test')
def test_handler(message):
    print "TEST WORKS"

if __name__ == "__main__":
    app.run(debug=True, host='0.0.0.0')
    socketio.run(app)

My page itself is very simple:

<!doctype html>
<html>
  <head>
    <title>Flask Socket.IO test</title>
    <style>
      body { font: 13px Helvetica, Arial; }
    </style>

    <script src="socket.io-1.4.3.js"></script>
    <script src="jquery-2.2.0.min.js"></script>
    <script>
      var socket = io("192.168.42.1:5000");
        socket.on('connect', function() {
            console.log(" connected ");
        });
        $(document).ready( function() {
            $( '.startBtn' ).click(function() {
                console.log("ok");
                socket.emit('test', {data:"start!"});
            });
        });
    </script>

  </head>

  <body>
    <div class="startBtn">
        <h1>START</h1>
    </div>
  </body>
</html>

I see on both sides that they connect (i.e. the connect event is triggered on both sides) but nothing that I send from the page to the server is received. I'm guessing somehow I have things misconfigured but the connection being established makes me think otherwise.

"test" is not a valid message ... socketio interface only has "connect","disconnect", and "message" ... I think ... anyway you need an on_message handler that you parse out additional information about what to do ... — Joran Beasley, Jan 14 '16 at 00:29
@JoranBeasley Interesting, the Flask-SocketIO documentation shows: `@socketio.on('my event') def handle_my_custom_event(json):` and a corresponding message being sent from the HTML page: `socket.emit('my event', {data: 'I\'m connected!'});` so I guess I'm assuming things not called 'message' should work? — Joshua Noble, Jan 14 '16 at 00:46
I would use a button, `` and then `$('#startBtn').click(function() { ... }`. I'm not sure if catching clicks on that 'START' text works at all. — J.J. Hakala, Jan 14 '16 at 00:48
@J.J.Hakala it prints 'ok' to the console, so as far as I can tell, should execute the next line as well — Joshua Noble, Jan 14 '16 at 00:49
yeah I know ... I spent some time messing with this(perhaps not enough time) and ended up just using on("message") and json.encoding a payload including "my_custom_event" or whatever ... — Joran Beasley, Jan 14 '16 at 00:55

score 4 · Accepted Answer · answered Jan 14 '16 at 01:26

So the problem seems to be in how I was setting up the Flask application and socketio. Changing it to this:

app = Flask(__name__)
socketio = SocketIO(app, async_mode='eventlet')

@app.route('/')
def index():
    return render_template('index.html')


@socketio.on('test')
def josh_test(message):
    print "test"

if __name__ == '__main__':
    socketio.run(app, debug=True)

it now all works fantastically with no changes to the HTML file. My previous version had:

if __name__ == "__main__":
   app.run(debug=True, host='0.0.0.0')
   socketio.run(app)

and that was what was causing the problems.

Flask and Flask-SocketIO

1 Answers1