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)
后端接收信息
前端接收后端发送的信息
在实现多线程队列任务时，本来想通过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