Tukukkk

I just started to play around with websockets in conjuction with Flask. For doing so I decided to use the flask-socketio module. The code looks like this:

#!/usr/bin/env python3



from flask import Flask, send_from_directory

from flask_socketio import SocketIO, emit, send





app = Flask(__name__, static_url_path='')

socketio = SocketIO(app)





@app.route('/')

def hello_world():

    return send_from_directory('html' ,'ws.html')





@socketio.on('connect')

def client_connected():

    # log new messages

    print('client connected')

    send('You are connected. Nice to have you here')





@socketio.on('message')

def handle_message(message):

    # echo received messages

    print(message)

    send(message)





if __name__ == '__main__':

    socketio.run(app)

For the client side I copied a rather ugly ws.html (which resides inside a folder called html) from the flask-socketio docs and updated it to the latest version of socket.io:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.slim.js"></script>

<script type="text/javascript" charset="utf-8">

    var socket = io.connect('http://' + document.domain + ':' + location.port);

    socket.on('connect', function() {

        socket.emit('message', {data: 'I'm connected!'});

    });

</script>

So the overall dir structure is:

.

├── srv.py

└── html

    └── ws.html

I then had a look at the WebSocket traffic via Chrome's developer tools. However, the output does not seem to be correct. Neither the welcome message upon connect nor the message sent from within the ws.html are shown in the frame's payload:

In order to narrow things a bit down I installed the npm module socketio-debugger. I am not quite sure about its core functionality/usage, but at least flask's welcome message seems to be sent correctly:

$ socketio-debugger http://localhost:5000

● start Event › connect

  Connected to http://localhost:5000

❯ log Event › message

  You are connected. Nice to have you here

What is going on here? Why do I get incorrect payload in Chrome's dev tools?

Based on how you phrased your question, I'm going to guess that the test application that you built works correctly, and you are only asking why you don't see the exchange of events in the Chrome dev tools.

The reason is that in the default way of starting a Socket.IO connection, clients connect via long-polling first, and once that connection is established they attempt an upgrade to WebSocket. So always the first few things that are exchanged go through long-polling. If you look at the HTTP requests in your dev tools you will see this event that your client is sending in a POST request.

If you want the connection to be established strictly on WebSocket, you can do so from the client as follows:

var socket = io.connect(

    'http://' + document.domain + ':' + location.port,

    {transports: ['websocket']}

);

Hope this helps!

You need to handle sent messages on client side as well.

When you receive message from client side, you can emit some random message again and handle it on client side.

Flask side:

@socketio.on('message')

def handle_message(message):

    # echo received messages

    print(message)

    emit('custom_msg', {'msg': 'hi'})

Client side (your ws.html)

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.slim.js"></script>

<script type="text/javascript" charset="utf-8">

    var socket = io.connect('http://' + document.domain + ':' + location.port);

    socket.on('connect', function() {

        socket.emit('message', {data: 'I'm connected!'});

    });

    socket.on('custom_msg', function(data){

        console.log(data['msg'])

    }

</script>