-
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/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 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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
后端
# 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)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
后端接收信息
前端接收后端发送的信息
在实现多线程队列任务时，本来想通过sockio对象在线程中直接执行emit发送信息，但前端不能接收到数据。
原因是socketio需要在app
客户端连接的上下文中才可以发送接收信息。目前实现做法是：通过一个中间监控者定时获取任务的信息，再把信息通过socketio发送出去。
注意点：1 实现后台函数时，如果有 while True 循环，一定要有
socketio.sleep(0.001)休眠语句，而且要大于零。要不然是阻塞状态，导致flask 无法通信。通过后端 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 -
相关阅读:
Windows11国内首发，宁盾终端准入率先实现兼容
[项目设计] 从零实现的高并发内存池(四)
IDEA Class爆红编译不通过但还是正常运行，查找调用链发现不正常（该显示的没显示）
云备份——数据信息管理模块
新成果展示：AlGaN/GaN基紫外光电晶体管的设计与制备
SpringBoot:Invalid bound statement (not found)的原因和解决方案
动态规划-状态机（188. 买卖股票的最佳时机 IV）
【性能优化】MySQL性能优化之存储引擎调优
STM32-CAN
游标简单解释
- 原文地址：https://blog.csdn.net/qq_38463737/article/details/126678480
