Flask 框架实现 WebSocket 通信的完整示例

后端实现（Python Flask + Flask-SocketIO） 环境准备 确保你的环境中安装了 Fla

后端实现（Python Flask + Flask-SocketIO）

环境准备

确保你的环境中安装了 Flask 和 Flask-SocketIO。
你可以通过以下命令安装：

pip install Flask Flask-SocketIO

创建后端代码

然后创建一个名为 app.py 的文件，并在其中添加以下代码：

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

# 创建 Flask 应用实例
app = Flask(__name__)
# 初始化 SocketIO
socketio = SocketIO(app)

@app.route('/')
def index():
    # 渲染前端 HTML 页面
    return render_template('index.html')

@socketio.on('message')
def handle_message(msg):
    # 处理接收到的消息
    print('Received message: ' + msg)
    # 向所有连接的客户端广播响应消息
    emit('response', 'Echo: ' + msg, broadcast=True)

if __name__ == '__main__':
    # 运行 Flask 应用
    socketio.run(app, debug=True)
  • Flask：创建一个 Flask 应用实例。
  • SocketIO：用于处理 WebSocket 通信。
  • @app.route('/')：定义一个路由，当访问根路径时，返回 index.html。
  • @socketio.on('message')：处理名为 message 的事件，接收到消息后，将其打印并返回一个响应。
  • emit('response', ...)：向所有连接的客户端发送消息。

前端实现（HTML + JavaScript）

在同一目录下创建一个 templates 文件夹，并在其中创建 index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
</head>
<body>
    <h1>WebSocket Communication</h1>
    <input id="messageInput" type="text" placeholder="Enter a message">
    <button id="sendButton">Send</button>
    <ul id="messages"></ul>

    <script>
        // 创建与服务器的 WebSocket 连接
        const socket = io();

        // 绑定点击事件，发送消息
        document.getElementById('sendButton').onclick = function() {
            const message = document.getElementById('messageInput').value;
            socket.emit('message', message);  // 发送消息
            document.getElementById('messageInput').value = '';  // 清空输入框
        };

        // 监听来自服务器的响应消息
        socket.on('response', function(msg) {
            const li = document.createElement('li');
            li.textContent = msg;  // 将消息显示在页面上
            document.getElementById('messages').appendChild(li);
        });
    </script>
</body>
</html>
  • HTML 部分定义了一个输入框、一个按钮和一个列表，用于显示消息。
  • JavaScript 部分使用  Socket.IO 创建与服务器的  WebSocket 连接。
  • 点击“Send”按钮时，会将输入框中的消息发送给服务器。
  • 通过 socket.on('response', ...) 监听服务器的响应，将其添加到消息列表中。

运行

  1. 启动后端服务：python app.py
  2. 打开浏览器，访问 http://127.0.0.1:5000。
  3. 在输入框中输入消息并点击“Send”按钮，就可以看到发送的消息以及后端的响应。

相关文章