前端+后端python双向通信
目的
在前后端分离的基础上（不用flask的模板渲染），用后端的flaskio和前端的socketio实现双向通信。
代码
后端python代码，用的是3.7
# -*-encoding: utf-8-*-
# pip install flask-socketio
from flask import Flask
from flask_cors import *
from flask_socketio import SocketIO
app = Flask(__name__)
CORS(app, supports_credentials=True)
socketio = SocketIO()
socketio.init_app(app, cors_allowed_origins='*')
name_space = '/dcenter' # socketio 的命名空间
@app.route('/')
def index():
print()
return "aasdlkfjasldkjf"
# 注册一个 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='127.0.0.1', port=5000, debug=True)
前端代码
引入到了一个js库，在webstome里可以直接抓下载到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>Demo of SocketIO</h2>
<button id="btn1" type="button">点击发送信息</button>
<br>
<p id="t1">接收dcenter事件信息</p>
<p id="t2"></p>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.js"></script>-->
<script src="js/http_cdnjs.cloudflare.com_ajax_libs_socket.io_3.1.3_socket.io.js"></script>
<script type="text/javascript">
function $(queryStr) {
return document.querySelector(queryStr);
}
window.onload = function () {
// let namespace = '/dcenter';
// let socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
let socket = io.connect(`http://127.0.0.1:5000/dcenter`);
console.log(io);
// let socket = io.connect(namespace)
// 注册一个dcenter 事件（后端发送信息时要添加dcenter事件名称），等待前端发送信息
socket.on('dcenter1', function (res) {
let t = JSON.stringify(res);
if (t) {
console.log("接收到了信息，", t)
}
});
// socket.io 固有事件：连接成功后执行该函数。
socket.on('connect', function () {
console.log('connect')
});
// socket.io 固有事件：连接错误触发事件处理器。
socket.on('connect_error', (error) => {
console.log("链接错误")
});
// socket.io 固有事件：丢失连接时触发时间处理器
socket.on('disconnect', (timeout) => {
console.log('链接丢失')
socket.close(); // 关闭连接
});
// 点击按钮发送一个my_event的消息，后端会接收，然后后端会发送一个dcenter1 信息
$("#btn1").addEventListener("click", function () {
socket.emit('my_event', {'hello': "世界！"});
});
}
</script>
</body>
</html>
结尾：
参考博客然后修修改改终于成功运行
