使用Python 打造实时聊天应用：使用Flask和SocketIO的终极指南

LIY若依

已于 2024-08-07 01:46:52 修改

阅读量797

点赞数 8

文章标签： python SocketIO 聊天程序 Flask

于 2024-08-06 21:46:18 首次发布

本文链接：https://blog.csdn.net/m0_74972192/article/details/140966933

版权

这篇博客展示了如何使用Flask和Flask-SocketIO构建一个简单的实时聊天应用。应用支持WebSocket通信，能够存储和广播聊天消息。

依赖库

Flask
Flask-SocketIO
os

好的，让我们一步一步来解析这个代码片段，并给出相关的扩展和说明。

代码解析

导入库和初始化应用
```
from flask import Flask, render_template, request, jsonify
from flask_socketio import SocketIO, send
import os

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
```
- Flask: 一个轻量级的Web框架，用于构建Web应用。
- Flask-SocketIO: 一个扩展，允许Flask应用支持WebSocket。
- os: 提供了一种便携式的方式使用操作系统相关的功能。
- app.config[‘SECRET_KEY’]: 设置Flask应用的密钥，用于会话管理和其他安全相关的需求。
- socketio = SocketIO(app): 初始化SocketIO对象，并将其与Flask应用关联。
存储聊天记录
```
messages = []
```
- messages: 用于存储聊天记录的列表。
定义路由和视图函数
```
@app.route('/')
def index():
    return render_template('index.html')

@app.route('/messages')
def get_messages():
    return jsonify(messages)
```
- @app.route(‘/’): 定义根路径的路由，返回index.html模板。
- @app.route(‘/messages’): 定义/messages路径的路由，返回聊天记录的JSON格式。

处理SocketIO消息

@socketio.on('message')
def handleMessage(msg):
    if msg != 'User has connected!':
        print('Message: ' + msg)
        messages.append(msg)
        send(msg, broadcast=True)
    else:
        print('用户已连接！')

@socketio.on(‘message’): 监听message事件。
handleMessage(msg): 处理接收到的消息，如果消息不是User has connected!，则将其打印、存储并广播给所有连接的客户端。

运行应用
```
if __name__ == '__main__':
    socketio.run(app, host='0.0.0.0', port=80, debug=True, allow_unsafe_werkzeug=True)
```
- if name == ‘main’: 确保脚本直接运行时执行以下代码。
- socketio.run(app, host=‘0.0.0.0’, port=80, debug=True, allow_unsafe_werkzeug=True): 运行SocketIO服务器，监听所有IP地址的80端口，并启用调试模式。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>聊天</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        document.addEventListener('DOMContentLoaded', function() {
            var socket = io.connect('http://' + document.domain + ':' + location.port);
            socket.on('connect', function() {
//                socket.send('用户已连接！');
            });
            socket.on('message', function(msg) {
                var p = document.createElement('p');
                p.innerHTML = msg;
                document.getElementById('messages').appendChild(p);
            });
            document.getElementById('sendbutton').onclick = function() {
                var message = document.getElementById('myMessage').value;
                socket.send(message);
                document.getElementById('myMessage').value = '';
            };

            // 按回车键发送消息
            document.getElementById('myMessage').addEventListener('keypress', function(e) {
                if (e.which == 13) {
                    var message = document.getElementById('myMessage').value;
                    socket.send(message);
                    document.getElementById('myMessage').value = '';
                    e.preventDefault(); // 防止默认的表单提交
                }
            });

            // 获取聊天记录
            $.get('/messages', function(data) {
                data.forEach(function(msg) {
                    var p = document.createElement('p');
                    p.innerHTML = msg;
                    document.getElementById('messages').appendChild(p);
                });
            });
        });
    </script>
</head>
<body>
    <h1>Chat</h1>
    <div id="messages" class="chat-box"></div>
    <input type="text" id="myMessage" placeholder="输入消息">
    <button id="sendbutton">发送</button>
</body>
</html>

运行结果

这个应用将启动一个Web服务器，支持WebSocket通信，并存储和广播聊天消息

完整代码

from flask import Flask, render_template, request, jsonify
from flask_socketio import SocketIO, send
import os

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

# 存储聊天记录
messages = []

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/messages')
def get_messages():
    return jsonify(messages)

@socketio.on('message')
def handleMessage(msg):
    if msg != 'User has connected!':
        print('Message: ' + msg)
        messages.append(msg)
        send(msg, broadcast=True)
    else:
        print('用户已连接！')

if __name__ == '__main__':
    socketio.run(app, host='0.0.0.0', port=80, debug=True, allow_unsafe_werkzeug=True)

爬虫项目推荐

其他项目推荐

扩展功能

用户身份验证:
- 添加用户登录和注册功能，确保只有授权用户才能发送和接收消息。
- 使用Flask-Login或其他身份验证扩展来管理用户会话。
消息持久化:
- 将聊天记录存储在数据库中（如SQLite、MySQL或MongoDB），而不是内存中，以便持久化存储。
- 使用SQLAlchemy或其他ORM工具来管理数据库操作。
消息格式化:
- 支持发送图片、表情符号和文件等多种消息类型。
- 使用Flask-Uploads或其他文件上传扩展来处理文件上传。
前端改进:
- 使用前端框架（如React、Vue或Angular）来构建更丰富的用户界面。
- 实现消息通知、在线用户列表等功能。