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

集电极

已于 2022-09-05 11:17:36 修改

阅读量2.4k

点赞数 1

分类专栏： python随笔文章标签： flask python websocket

于 2022-09-03 16:00:13 首次发布

本文链接：https://blog.csdn.net/qq_38463737/article/details/126678480

版权

python随笔专栏收录该内容

87 篇文章 26 订阅

订阅专栏

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)

后端接收信息

前端接收后端发送的信息

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

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

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

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

前端资料
socket.io 客户端 API_w3cschool

通过后端 flask-socketio 通信参考资料
入门 — Flask-SocketIO 文档
 比较好的文章 - Flask-SocketIO_阿汤哥的程序之路的博客-CSDN博客_flask-socketio
例子和讲解-Flask实现双向通信-淡淡的忧伤博客 (huyu.info)
一个例子-flask+socketIO+echarts实时监控CPU - 知乎 (zhihu.com)
flask+socketio+echarts3 服务器监控程序（基于后端数据推送） - 罗兵 - 博客园 (cnblogs.com)
flask-socketio使用遇到的坑，版本兼容问题和while True堵塞信息问题_海盐老伍的博客-CSDN博客_flasksocketio的坑
 Flask-websocket Emit主动发送消息失败 - SegmentFault 思否
 官方后台线程例子-Flask-SocketIO/app.py at main · miguelgrinberg/Flask-SocketIO · GitHub