使用Python实现WebSocket通信的完整例子！

2024年10月28日下午8:57 • Web开发

下面是一个后端使用Python实现 WebSocket 通信的示例，包含了前后端的代码和说明。

后端实现（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', ...) 监听服务器的响应，将其添加到消息列表中。

运行

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

总结

后端使用 Flask 和 Flask-SocketIO 实现 WebSocket 服务，通过监听和发送事件进行通信。
前端使用 HTML 和 JavaScript 创建用户界面，通过 Socket.IO 客户端与后端进行交互。
该示例展示了 WebSocket 的基本用法，可以扩展以实现更复杂的功能，比如用户身份验证、房间功能等。

通过以上简单的示例，你应该快速了解了通过Python搭建 WebSocket 通信的基本框架，后续可以在此基础上进行更深入的开发。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用Python实现WebSocket通信的完整例子！ - Python技术站

使用Python实现WebSocket通信的完整例子！

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

环境准备

创建后端代码

前端实现（HTML + JavaScript）

运行

总结

相关文章