Flask 实时刷新

Flask 是一个轻量级的 Python Web 框架，它可以帮助开发者快速构建 Web 应用，在实际应用中，我们经常需要实现实时刷新的功能，例如实时显示数据、实时聊天等，本文将详细介绍如何使用 Flask 实现实时刷新功能。

（图片来源网络，侵删）

1、基本原理

实时刷新的原理是在客户端和服务器之间建立一个长连接，通过这个长连接不断地发送请求和接收响应，这样，当服务器端的数据发生变化时，可以立即将最新的数据发送给客户端，从而实现实时刷新的效果。

2、技术选型

要实现 Flask 实时刷新功能，我们需要使用到以下几个技术：

WebSocket：WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它使得客户端和服务器可以在任何时候都能发送数据，而不仅仅是在请求响应的过程中，WebSocket 是实现实时刷新的理想选择。

FlaskSocketIO：FlaskSocketIO 是一个用于 Flask 的 WebSocket 扩展库，它可以帮助我们轻松地实现 WebSocket 通信。

3、环境搭建

我们需要安装 Flask 和 FlaskSocketIO：

pip install Flask FlaskSocketIO

4、创建 Flask 项目

新建一个名为 app.py 的文件，编写如下代码：

from flask import Flask, render_template
from flask_socketio import SocketIO, emit
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
@app.route('/')
def index():
    return render_template('index.html')
@socketio.on('message')
def handle_message(data):
    print('received message: ' + data)
    emit('message', data, broadcast=True)
if __name__ == '__main__':
    socketio.run(app)

5、创建模板文件

在项目目录下创建一个名为 templates 的文件夹，然后在该文件夹下创建一个名为 index.html 的文件，编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <title>Flask Realtime</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="message" placeholder="Type your message here">
    <button id="send">Send</button>
    <ul id="messages"></ul>
    <script>
        var socket = io.connect('http://' + document.domain + ':' + location.port);
        socket.on('connect', function() {});
        socket.on('message', function(msg) {
            $('#messages').append('<li>' + msg + '</li>');
        });
        $('#send').on('click', function() {
            var message = $('#message').val();
            socket.emit('message', message);
            $('#message').val('');
        });
    </script>
</body>
</html>

6、运行项目

在命令行中运行以下命令启动项目：