flask_restful和flask_socketio 写一个前后端分离的网页聊天程序
时间: 2023-11-07 07:07:03 浏览: 83
好的,下面是一个简单的前后端分离的网页聊天程序的示例代码:
### 后端代码
```python
from flask import Flask, jsonify, request
from flask_socketio import SocketIO, emit
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app, cors_allowed_origins='*')
messages = []
@app.route('/messages', methods=['GET'])
def get_messages():
return jsonify({'messages': messages})
@socketio.on('message')
def handle_message(data):
messages.append(data)
emit('message', data, broadcast=True)
if __name__ == '__main__':
socketio.run(app)
```
在这个示例中,我们使用 Flask 和 Flask-SocketIO 来实现后端逻辑。`/messages` 路由用于获取历史消息,`handle_message` 函数用于处理来自前端的消息。我们将新消息添加到 `messages` 数组中,并使用 `emit` 方法将其广播到所有连接的客户端。
### 前端代码
```html
<!DOCTYPE html>
<html>
<head>
<title>Chat Room</title>
<script src="https://cdn.socket.io/socket.io-3.1.1.min.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form id="chat-form">
<input type="text" id="message-input" autocomplete="off">
<button type="submit">Send</button>
</form>
<script>
var socket = io.connect('http://localhost:5000');
function appendMessage(message) {
var li = document.createElement('li');
li.innerText = message;
document.querySelector('#messages').appendChild(li);
}
socket.on('message', function(data) {
appendMessage(data);
});
document.querySelector('#chat-form').addEventListener('submit', function(e) {
e.preventDefault();
var messageInput = document.querySelector('#message-input');
var message = messageInput.value;
messageInput.value = '';
socket.emit('message', message);
appendMessage(message);
});
</script>
</body>
</html>
```
在这个示例中,我们使用 Socket.IO 客户端库来实现前端逻辑。我们在页面上显示了一个消息列表和一个表单,用于发送新消息。当用户提交表单时,我们使用 `socket.emit` 方法将消息发送到后端,并在消息列表中显示新消息。当后端广播消息时,我们通过 `socket.on` 方法接收并在消息列表中显示它。
这样,我们就实现了一个简单的前后端分离的网页聊天程序。
阅读全文