python flask 和浏览器实现 websocket 双向通讯- flask-socketio

需要搭配前端的 socket.io 一起实现双向通讯

前端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.js"></script>
</head>

<body>
    <h2>Demo of SocketIO</h2>
    <button id="btn1" type="button" class="btn btn-primary">点击发送信息</button>
    <br>
    <p id="t1">接收dcenter事件信息
    <p id="t2"></p>
    </p>

    <script type="text/javascript">
        $(document).ready(function () {
            namespace = '/dcenter';
            // var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
            var socket = io.connect(namespace)
            // 注册一个dcenter 事件（后端发送信息时要添加dcenter事件名称），等待前端发送信息
            socket.on('dcenter1', function (res) {
                var t = JSON.stringify(res);
                if (t) {
                    $("#t2").append(t).append('<br/>');
                }
            });

            // socket.io 固有事件：连接成功后执行该函数。
            socket.on('connect', function () {
                console.log('connect')
            });
            // socket.io 固有事件：连接错误触发事件处理器。
            socket.on('connect_error', (error) => {
                // ...
                console.log("connect_error")
                // socket.close();
            });
            // socket.io 固有事件：丢失连接时触发时间处理器
            socket.on('disconnect', (timeout) => {
                // ...
                console.log('disconnect')
                socket.close();  // 关闭连接
            });
            // 点击按钮发送一个my_event的消息，后端会接收，然后后端会发送一个dcenter1 信息
            $("#btn1").click(function () {
                socket.emit('my_event', { '你好': "世界！" })
            })
        });
    </script>
</body>

</html>

后端

# pip install flask-socketio
from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO()
socketio.init_app(app, cors_allowed_origins='*')

name_space = '/dcenter'  # socketio 的命名空间

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

# 注册一个 my_event事件，响应前端发来的 my_event 事件的信息
@socketio.on('my_event', namespace=name_space)
def mtest_message(data):
    print(data)
    # 发送一个 事件名称是 dcenter1 的信息给前端
    event_name = 'dcenter1'
    broadcasted_data = {"type": "delete", "user_id": "123", "data": "1111111111111"}
    socketio.emit(event_name, broadcasted_data, broadcast=False, namespace=name_space)

# 下面注册 连接/断开/消息 三个默认事件
@socketio.on('connect', namespace=name_space)
def connected_msg():
    print('client connected.')

@socketio.on('disconnect', namespace=name_space)
def disconnect_msg():
    print('client disconnected.')

@socketio.on("message", namespace=name_space)
def message(data):
    print("message")

if __name__ == '__main__':
    # app.run(host='0.0.0.0', port=5000, debug=True)
    socketio.run(app, host='0.0.0.0', port=5000, debug=True)
后端接收信息

python socket不用while_flask


前端接收后端发送的信息


python socket不用while_html_02

在实现多线程队列任务时，本来想通过sockio对象在线程中直接执行emit发送信息，但前端不能接收到数据。

原因是socketio需要在app 客户端连接的上下文中才可以发送接收信息。

目前实现做法是：通过一个中间监控者定时获取任务的信息，再把信息通过socketio发送出去。

注意点：1 实现后台函数时，如果有 while True 循环，一定要有 socketio.sleep(0.001) 休眠语句，而且要大于零。要不然是阻塞状态，导致flask 无法通信。