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

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/[email protected]/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 SocketIOh2>
    <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('
'
); } }); // 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 flask 和浏览器实现 websocket 双向通讯- flask-socketio_第1张图片

在实现多线程队列任务时,本来想通过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

你可能感兴趣的:(python随笔,flask,python,websocket)