Flask-socketio: полезная нагрузка отправленных / отправленных сообщений не отображается правильно в devtools

Question

Я только начал играть с паутиной в сочетании с Flask.Для этого я решил использовать модуль flask-socketio.Код выглядит следующим образом:

#!/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)

Для клиентской части я скопировал довольно уродливый ws.html (который находится в папке с именем html) из документов на флешку socketio и обновил его до последней версии 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>

Итак, общая структура dir:

.
├── srv.py
└── html
    └── ws.html

Затем я взглянул на трафик WebSocket с помощью инструментов разработчика Chrome.,Тем не менее, вывод не представляется правильным.Ни приветственное сообщение при соединении, ни сообщение, отправленное из ws.html, не отображаются в полезной нагрузке фрейма:

Чтобы сузитьЯ установил модуль npm socketio-debugger.Я не совсем уверен относительно его основной функциональности / использования, но, по крайней мере, приветственное сообщение о фляге, кажется, отправлено правильно:

$ socketio-debugger http://localhost:5000
● start Event › connect
  Connected to http://localhost:5000
❯ log Event › message
  You are connected. Nice to have you here

Что здесь происходит?Почему я получаю неправильную полезную нагрузку в инструментах разработчика Chrome?

Answer 1

Исходя из того, как вы сформулировали свой вопрос, я предполагаю, что созданное вами тестовое приложение работает правильно, и вы спрашиваете только, почему вы не видите обмен событиями в инструментах разработчика Chrome.

Причина заключается в том, что по умолчанию при запуске соединения Socket.IO клиенты сначала подключаются с помощью длинного опроса, и после того, как это соединение установлено, они пытаются выполнить обновление до WebSocket.Так что всегда первые несколько вещей, которыми обмениваются, проходят долгий опрос.Если вы посмотрите на HTTP-запросы в ваших инструментах разработки, вы увидите это событие, которое ваш клиент отправляет в POST запросе.

Если вы хотите, чтобы соединение устанавливалось строго через WebSocket, вы можете сделать этоот клиента следующим образом:

var socket = io.connect(
    'http://' + document.domain + ':' + location.port,
    {transports: ['websocket']}
);

Надеюсь, это поможет!

Answer 2

Вам также необходимо обрабатывать отправленные сообщения на стороне клиента.

Когда вы получаете message со стороны клиента, вы можете снова отправить случайное сообщение и обработать его на стороне клиента.

Сторона колбы:

@socketio.on('message')
def handle_message(message):
    # echo received messages
    print(message)
    emit('custom_msg', {'msg': 'hi'})

Сторона клиента (ваш 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>