flask使用websocket

時間 2019-11-08

標籤 flask 使用 websocket 欄目 Python 简体版

原文原文鏈接

# flask使用websocket

1.概述

flask實現websocket有兩種方式：flask_sockets，Flask-SocketIO。javascript

flask_sockets：該方式是flask對websocket的最原始封裝，功能較爲單一；
Flask-SocketIO：該方式所能提供功能較多，不但實現了socket的基本通訊功能，也能夠結合flask相關接口，使其更加完備。css

2.flask-sockets實驗

2.1 環境配置

安裝flask-sockets包，版本0.2.1
pip install flask-socketshtml

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")

添加路由是用方法完成的，後面兩句是看一下路由映射關係。
java



# 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)

路由映射關係：jquery

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，此處略。web

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.測試結果

後端：
json



client says(2019-09-27-19-54-33): 請發送數據

頁面：flask

操做記錄： 
數據發送中...
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條消息。。。
鏈接已關閉...

1. 在flask中使用WebSocket
2. Flask - WebSocket
3. Flask--WebSocket
4. Flask websocket
5. flask websocket
6. WebSocket with Flask
7. 【Flask】 flask-socketio實現WebSocket
8. 結合manage.py，在flask項目中使用websocket模塊--- flask-socketio
9. Flask使用flask-sqlalchemy
10. nginx+flask+gevent+uwsgi實現websocket
更多相關文章...
• TortoiseSVN 使用教程 - SVN 教程
• Docker 容器使用 - Docker教程
• Composer 安裝與使用
• 使用Rxjava計算圓周率

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。