后端实现(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”按钮,就可以看到发送的消息以及后端的响应。