Flask-socketio：在devtools中未正确显示已发送/发送消息的有效负载

Question

我刚开始和Flask一起玩websocket。为此，我决定使用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)

对于客户端，我从flask-socketio docs复制了一个相当丑陋的ws.html（位于名为html的文件夹中）并将其更新为最新版本的socket.io：< / p>

<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>

因此，整个目录结构为：

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

然后，我通过Chrome的开发人员工具查看了WebSocket的流量。但是，输出似乎不正确。连接的欢迎消息或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

您还需要在客户端处理发送的消息。

当您从客户端收到@socketio.on('message') def handle_message(message): # echo received messages print(message) emit('custom_msg', {'msg': 'hi'}) 时，您可以再次发出一些随机消息并在客户端进行处理。

烧瓶侧面：

<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>

客户端（您的 ws.html ）

{{1}}

Answer 2

根据您对问题的措辞，我猜测您构建的测试应用程序可以正常运行，而您只是问为什么在Chrome开发工具中看不到事件交换。

原因是，在启动Socket.IO连接的默认方式中，客户端首先通过长轮询进行连接，一旦建立了连接，它们便尝试升级到WebSocket。因此，交换的头几件事总是经过长轮询。如果您在开发工具中查看HTTP请求，则会看到客户端正在发送POST请求的事件。

如果要严格在WebSocket上建立连接，则可以从客户端执行以下操作：

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

希望这会有所帮助！