先擼碼，後廢話！
App.py Code：
#!/usr/bin/env python
# -*- coding: utf-8 -*-
from flask import Flask, render_template
from flask_socketio import SocketIO
from threading import Lock
import random
async_mode = None
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app, async_mode=async_mode)
thread = None
thread_lock = Lock()
@app.route('/')
def index():
return render_template('index.html', async_mode=socketio.async_mode)
@socketio.on('connect', namespace='/test_conn')
def test_connect():
global thread
with thread_lock:
if thread is None:
thread = socketio.start_background_task(target=background_thread)
def background_thread():
while True:
socketio.sleep(2)
t = random.randint(1, 100)
socketio.emit('server_response', {'data': t}, namespace='/test_conn')
@socketio.on('disconnect', namespace='/chat')
def test_disconnect():
print('Client disconnected')
if __name__ == '__main__':
socketio.run(app, debug=True)
Index.html Code：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript" src="//cdn.bootcdn.net/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
</head>
<body>
<h1 id="tag"></h1>
<script type="text/javascript">
$(document).ready(function() {
namespace = '/test_conn';
var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
socket.on('server_response', function(res) {
console.log(res.data);
$('#tag').text(res.data);
});
});
</script>
</body>
</html>
Browser Effects：
後記：
代碼實現的基本效果是後端2秒生成一次隨機數，將生成後的結果推送到前端。
同樣的效果用 Ajax 輪詢也是可以做到的，Ajax輪詢原理是設置定時器，定時通過AJAX同步服務端數據。但是這種方式存在延時且對服務端造成較大的負載。
而使用 SocketIO 只需要客戶端連接一次,然後維護一個永久的TCP連接，數據更實時。
SocketIO（服務端有消息立刻推送）：小弟，有人給你發了條消息，你收一下
Ajax（定時查詢服務端是否有消息）：老頭，有消息嗎？有消息的話你給我
參考文章：
Flask-SocketIO筆記
官方示例文檔（超乾貨）