为flask加入WebSockets通信

  • Post author:
  • Post category:其他




构建

web

服务时,有时候需要即时更新网页内容,如:通知、新加信息等,通过

AJAX

可以实现不刷新网页的情况下数据更新,但对于数据何时需要更新,一种方式是客户端不断轮询,另一种方式是服务端数据更新后通知客户端进行数据更新,显然后者更优雅,消耗更少资源,这么好的方式显然已经被实现了,

DuangDuangDuang



WebSockets

登场~

WebSocket一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 是独立的、创建在 TCP 上的协议,和 HTTP 的唯一关联是使用 HTTP 协议的101状态码进行协议切换,
使用的 TCP 端口是80,可以用于绕过大多数防火墙的限制。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端直接向客户端推送数据而不需要客户端进行请求,
在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,
并允许数据进行双向传送。

对于

flask

来说,可以通过

flask_socketio

实现上述效果,首先是

pip install flask_socketio

(

flask_socketio

)。


Demo

实现如下:

# app.py
import datetime
from threading import Lock

from flask import Flask, render_template
from flask_socketio import SocketIO, emit


app = Flask(__name__, template_folder="./")
socketio = SocketIO(app)

_thread = None
lock = Lock()

@app.route("/")
def index():
	return render_template("index.html")


# used as callback
def background_task():

	# your trigger event
	while True:
		current_datetime = str(datetime.datetime.now())
		current_datetime = "datetime is : " + current_datetime

		# emit to your named event
		socketio.emit("server_response", {"data": current_datetime})
		socketio.sleep(10)


@socketio.on("connect")
def connect():
	global _thread
	with lock:
		if _thread is None:
			_thread = socketio.start_background_task(target=background_task)


if __name__ == "__main__":
	socketio.run(app, host="0.0.0.0", port=6789, debug=True)
<!-- index.html -->
<!DOCTYPE HTML>
<html>
<head>
    <title>Flask-SocketIO Test</title>
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.bootcss.com/socket.io/1.5.1/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        var socket = io.connect();

        socket.on('server_response', function(msg) {
            $('#content').append('<br>' + $('<div/>').text('Received #' + ': ' + msg.data).html());
        });
    });
    
    </script>   
</head>
<body>
    <h2>WebSokect Example</h2>
    <div id='content'></div>
</body>
</html>

打开浏览器,进入:

http://localhost:6789

,就可以看到效果了,

Enjoy yourself ~



版权声明:本文为xiaodongxiexie原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。