在Python实战websocket协议中，我们已经了解了如果使用Python实践基本的websocket协议。

而对于更加常用的场景，我们以Flask框架为例，来演示如何实现更加复杂的应用。

flask_sockets介绍

flask_sockets是一个基于Python3的，用于扩展Flask框架以支持websocket协议的Python第三方库。

安装方式如下：

  1. pip3 install flask_sockets

基于Flask实现的websocket接口

保存如下内容至flask_ws_server.py文件：

  1. # -*- coding: UTF-8 -*-
  2. """
  3. # www.missshi.cn
  4. """
  5. from flask import Flask
  6. from flask_sockets import Sockets
  7. import datetime
  8. import time
  11. app = Flask(__name__)
  12. sockets = Sockets(app)
  15. @sockets.route('/echo')
  16. def echo_socket(ws):
  17.     """
  18.     # WebSocket接口实现
  19.     :param ws:
  20.     :return:
  21.     """
  22.     while not ws.closed:
  23.         now = datetime.datetime.now().isoformat() + 'Z'
  24.         ws.send(now)  #发送数据
  25.         time.sleep(1)
  28. @app.route('/')
  29. def hello():
  30.     """
  31.     # HTTP接口
  32.     :return:
  33.     """
  34.     return 'Hello World!'
  37. if __name__ == "__main__":
  38.     from gevent import pywsgi
  39.     from geventwebsocket.handler import WebSocketHandler
  40.     server = pywsgi.WSGIServer(('', 5000), app, handler_class=WebSocketHandler)
  41.     print('server start')
  42.     server.serve_forever()

前端Demo访问websocket接口

为了能够更加直观的体验websocket接口的功能，我们需要一个前端页面来进行可视化显示。

保存如下内容为index.html文件：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
  7. </head>
  8. <body>
  9.     <div id="time" style="width: 300px;height: 50px;background-color: #0C0C0C;
  10.     color: white;text-align: center;line-height: 50px;margin-left: 40%;font-size: 20px"></div>
  12.     <script>
  13.             var ws = new WebSocket("ws://127.0.0.1:5000/echo");
  15.             ws.onmessage = function (event) {
  16.                 content = document.createTextNode(event.data);
  17.                 $("#time").html(content);
  18.             };
  20.     </script>
  21.     </body>
  22. </html>

使用浏览器打开index.html文件即可看到如下内容：

Flask websocket协议实战 - 图1

可以看到，浏览器中的时间每隔1s会进行一次变化。