随着互联网的发展，实时性成为了许多Web应用的重要需求之一。传统的HTTP协议虽然可以实现实时通信，但是其长轮询等机制效率低下，无法满足高并发、低延迟的需求。为了解决这一问题，诞生了WebSocket协议，它可以在客户端和服务器之间建立持久连接，实现双向通信，极大地提高了实时性。
在Python的Web开发领域，Flask是一个轻量级的Web框架，广受开发者喜爱。而Flask-SocketIO则是一个基于Flask的WebSocket扩展，可以方便地为Flask应用添加实时通信功能。本文将介绍如何使用Flask-SocketIO构建一个简单的实时Web应用。
准备工作
首先，确保你已经安装了Flask和Flask-SocketIO扩展：
pip install Flask Flask-SocketIO
编写代码
创建一个简单的Flask应用，并添加SocketIO支持：
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(message):
print('Received message: ' + message)
emit('message', message, broadcast=True)
if __name__ == '__main__':
socketio.run(app)
编写HTML模板
创建一个简单的HTML模板index.html，用于展示实时通信的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-time Chat</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js" integrity="sha384-fJpz2xK1GIM2bmivw9nUJ6By6dOzEn7lmOeLT4gV6cg9R3kYjKwOsgu0Ixhvcrld" crossorigin="anonymous"></script>
<script type="text/javascript">
var socket = io.connect('http://' + document.domain + ':' + location.port);
socket.on('message', function(data) {
var p = document.createElement('p');
p.innerHTML = data;
document.getElementById('messages').appendChild(p);
});
function sendMessage() {
var message = document.getElementById('message').value;
socket.emit('message', message);
document.getElementById('message').value = '';
}
</script>
</head>
<body>
<h1>Real-time Chat</h1>
<div id="messages"></div>
<input type="text" id="message" placeholder="Enter your message">
<button onclick="sendMessage()">Send</button>
</body>
</html>
运行应用
现在，运行Flask应用，并在浏览器中访问http://localhost:5000，即可体验实时聊天功能了。你可以在多个浏览器窗口中打开该页面，发送消息，即可看到实时通信的效果。
通过Flask-SocketIO，我们可以轻松地构建实时Web应用，满足用户对实时性的需求。你可以进一步扩展该应用，实现更复杂的实时功能，如实时数据展示、多人协作编辑等。
![[ACTF新生赛2020]SoulLike](https://img-blog.csdnimg.cn/direct/fcf64b9a452144cd9f7ff4adb7347b97.png)
