Flask WebSocket 实时消息推送教程

安装 Flask-SocketIO

要使用 WebSocket，我们需要安装 Flask-SocketIO 扩展。可以使用 pip 安装它：

pip install Flask-SocketIO

实现 WebSocket

在 Flask 应用程序中，我们需要创建一个 WebSocket 连接，以便客户端可以连接并接收实时消息。

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('connect')
def test_connect():
    emit('my response', {'data': 'Connected'})

if __name__ == '__main__':
    socketio.run(app)

在上述代码中，我们创建了一个 Flask 应用程序并使用 Flask-SocketIO 扩展创建了一个 WebSocket 连接。我们定义了一个路由 /，它将渲染 index.html 模板。当一个客户端连接到 WebSocket 时，test_connect 函数将被调用，并将一个 'my response' 事件发送到客户端。

实现 WebSocket 客户端

现在我们已经实现了 WebSocket，下一步是创建一个 WebSocket 客户端，以便我们可以连接到 WebSocket 并接收实时消息。

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Example</title>
    <script src='//code.jquery.com/jquery-1.11.3.min.js'></script>
    <script src='//cdn.socket.io/socket.io-1.3.4.js'></script>
    <script>
        $(document).ready(function(){
            var socket = io.connect('http://' + document.domain + ':' + location.port);
            socket.on('my response', function(data){
                $('#response').append('<p>' + data.data + '</p>');
            });
        });
    </script>
</head>
<body>
    <div id='response'></div>
</body>
</html>

在上面的代码中，我们使用 jQuery 和 Socket.IO 客户端库连接到 WebSocket，并在 'my response' 事件上接收数据。我们将数据附加到 #response 元素中。

测试 WebSocket

现在，我们可以启动应用程序并在浏览器中打开 http://localhost:5000/。

if __name__ == '__main__':
    socketio.run(app)

在终端上运行上述代码，应用程序将在 http://localhost:5000/ 上运行。

当您在浏览器中打开 http://localhost:5000/ 时，您应该能够看到连接到 WebSocket 并将数据附加到页面中的 #response 元素。

现在，我们已经成功地使用 Flask 和 Flask-SocketIO 扩展实现了 WebSocket 推送消息。