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條消息。。。 連接已關閉...