flask使用websocket
1.概述
flask实现websocket有两种方式：flask_sockets，Flask-SocketIO。
flask_sockets：该方式是flask对websocket的最原始封装，功能较为单一；
Flask-SocketIO：该方式所能提供功能较多，不但实现了socket的基本通信功能，也可以结合flask相关接口，使其更加完备。
2.flask-sockets实验
2.1 环境配置
安装flask-sockets包，版本0.2.1
pip install flask-sockets
2.2 后端
2.2.1 route
路由包括两部分，其一为页面路由，其二为后台数据交换路由。
def handle_route_websocket_simple(app):
@app.route('/ws/test_1')
def page_ws_test_1():
return render_template('websocket_test.html', title="websocket test")
# websocket
def handle_route_websocket(app_socket):
@app_socket.route('/ws/test_2')
def page_websocket_test(ws):
now = time.strftime('%Y-%m-%d-%H-%M-%S', time.localtime(time.time()))
while not ws.closed:
# 回传给clicent
message = ws.receive() # 接收到消息
if message is not None:
print("client says(%s): %s" %(now, message))
ws.send(str("回执：server已收到消息!-- %s " % now))
ws.send(str(json.dumps(message))) # 回传给clicent
else:
print(now, "no receive")
添加路由是用方法完成的，后面两句是看一下路由映射关系。
# websocket页面
from flask_sockets import Sockets
app_socket = Sockets(app)
from .routes import handle_route_websocket, handle_route_websocket_simple
handle_route_websocket_simple(app)
handle_route_websocket(app_socket)
print(app_socket.url_map)
print(app.url_map)
路由映射关系：
Map([<Rule '/ws/test_2' -> <function handle_route_websocket.<locals>.page_websocket_test at 0x0000009D88A83620>>])
Map([
<Rule '/ws/test_1' (GET, OPTIONS, HEAD) -> page_ws_test_1>,
<Rule '/hello' (GET, OPTIONS, HEAD) ->hello>,
<Rule '/static/<filename>' (GET, OPTIONS, HEAD) -> static>])
2.2.2 启动服务器
因为返回来的报文有websocket和HTTP两种，需要在WSGI中进行区分。
具体可以看下WebSocketHandler，此处略。
def run_app_websocket():
app_websocket = WSGIServer(('0.0.0.0', 9000), flask_app, handler_class=WebSocketHandler)
app_websocket.serve_forever() if __name__ == '__main__':
pass
#run_app()
run_app_websocket()
2.3 前端
<html>
<head>
<meta charset="utf-8" />
<title>websocket 测试</title>
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js">
</script>
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
// alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
var ws = new WebSocket("ws://localhost:9000/ws/test_2");
ws.onopen = function(){
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("请发送数据");
$("#r_s").append("数据发送中...<br>")
};
ws.onmessage = function (evt){
var received_msg = evt.data;
$("#r_s").append("server says: "+decodeURI(received_msg)+"<br>")
//ws.send("数据已收到。")
};
ws.onclose = function(){
// 关闭 websocket
ws.send("正在关闭连接...")
$("#r_s").append("连接已关闭...<br>")
};
}
else {
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>
<div id="r_s">
操作记录：
<br />
</div>
</body>
</html>
3.测试结果
后端：
client says(2019-09-27-19-54-33): 请发送数据
页面：
操作记录：
数据发送中...
server says: 回执：server已收到消息!-- 2019-09-27-19-54-33
server says: 第0条消息。。。
server says: 第1条消息。。。
server says: 第2条消息。。。
server says: 第3条消息。。。
server says: 第4条消息。。。
server says: 第5条消息。。。
server says: 第6条消息。。。
server says: 第7条消息。。。
server says: 第8条消息。。。
server says: 第9条消息。。。
连接已关闭...