一、总体设计
项目整体采用python-flask框架，前端界面采用Bootstrap前端框架设计开发，采用WebSocket实现服务器端与客户端的长连接以及实时的数据处理。主要包括登陆注册、服务器管理、客户聊天三大功能。其中:
1)客户端提供登录、主窗体及聊天等界面及对应的业务逻辑，向服务器发送相应的服务请求，并接受相应的处理结果。客户端只负责链接远程服务器，并发出相应的服务请求，不进行核心业务逻辑的处理，客户端只接收服务器处理的结果并显示给用户。
2）服务器监控登录信息及在线用户信息，接收客户端的服务请求，并做相应的处理，然后将处理结果发送给客户端。服务器负责处理核心的业务逻辑，并负责连接数据库，保存和读取数据。
文件组织如下：
A.包static：存放项目静态文件，如css，js，images等；
B.包templates，存放html文件，jinjia2模板；
C.包venv，虚拟环境
D.Event.py 连接客户端与服务端，接收客户端请求
E.App.py 项目主要逻辑代码以及项目终端管理脚本文件
F.Query.py 配置数据库，存放数据库增删查改操作函数
G.requirements.txt 项目所有安装包以及版本号
图1：项目文件结构图
2.功能模块设计
图2：客户端功能模块图
图3：服务端功能模块图
四、详细设计
1）程序流程图：
图4：程序流程图
2）数据访问层的实现:
1.打开数据库连接:
db = pymysql.connect(‘localhost’, ‘root’, ‘数据库密码’, ‘chatroom’, charset=‘utf8’)；
2.使用 cursor() 方法创建一个游标对象 cursor:
cursor = db.cursor()；
3. 使用 execute() 方法执行 SQL 查询 cursor.execute(sql语句)；
4. 使用 fetchone() 方法获取查询结果：data = cursor.fetchone()；
5.提交到数据库执行SQL语句： mit() ；
6.如果发生错误则回滚 db.rollback()；
7.关闭数据库连接 cursor.close()；db.close()；
主要函数：
def query(sql,params);
#数据库查询函数，带参数，含参数主要为了sql防注入
def query_no(sql); #数据库查询函数，带参数
def update(sql,params); #数据库更新函数，执行增删改操作
3）WebSocket通信聊天的实现：
A.后端部分：
1.导入相应的模块：
from flask_socketio import emit, join_room,SocketIO
SocketIO模块：用于实现服务器端与客户端的长连接；
emit：用于实时的数据处理，如发送消息；
join_room：给用户分配聊天房间，加入到同一个房间的客户端可以接收发送给该房间的消息。
2.创建一个socket对象：socketio = Socket IO（）；
3.在APP应用工程中将socket对象绑定到app上：
def create_app(config): #创建app实例
app = Flask(name) #定义模块名字为app
app.config.from_object(config) #加载配置文件
socketio.init_app(app) #实例化socket模块
app.register_blueprint(socket_bp) #实例化蓝图
return app #返回APP对象
4.创建服务器与前端的连接，connect为函数名，连接函数的函数名前后端都需要保持一致，namespace指定为函数指定作用路由：
@socketio.on(‘connect’, namespace=’/chat’)
def connect():
print(‘您好！连接成功’)
5.定义监听事件，test为事件名，客户端向这个事件发送消息时触发，message为客户端发送过来的消息，socketio.on接收前端消息，socketio.emit向前端发送消息：
@socketio.on(‘test’, namespace=’/chat’)
def test(message):
emit(‘response’, {‘data’: message})
6.使用disconnect()的方法可以在进入事件后断开连接：
@socketio.on(‘disconnect’, namespace=’/chat’)
def disconnect():
print(‘断开连接’)
B.前端部分（前端主要通过js代码与后端建立连接进行通信）：
1.导入socketio的js库：
2.创建一个socket对象：
var websocket_url
= ‘http://’ + document.domain + ‘:’ + location.port + ‘/chat’;
var socket = io(websocket_url);
3. 监听事件,connect为事件名，与后端函数事件名保持一致：
socket.on(‘connect’, function() {
log(‘连接成功’);
});
4.发送消息,第一个参数为后端定义的事件名，第二个为需要发送到服务器消息数据。
socket.emit(‘class-1’,encodeURI(encodeURI(msg)));
主要函数：
def connect(): #使用websocket连接前后端
def joined(information): #定义函数为用户分配聊天室
def text(information): #接收前端的请求以及聊天内容
def avatar_url(information): #接收用户更换头像的路径
4）聊天内容的发送、接收和显示功能的实现：
1.获取前端输入框内容：
$(’.enter’).keypress(function(e) { #绑定文本输入框
var code = e.keyCode || e.which; #获取用户点击发送事件
var text; #定义text变量，用户存放聊天内容
if (code == 13) {
var Texttext = $(’.enter’).val(); #获取聊天框中内容
$(’.enter’).val(’’); #清空聊天框内容
socket.emit(‘text’, {‘text’: Texttext}); #发送文本消息给后端
}});
2.获取用户选择的表情，并把表情添加到输入框内：
$(’#Emoji’).change(function() { //绑定表情选择框
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲Emoji").val(); …("#Emoji option:selected"); //获取当前选择项.
options.val(); //获取当前选择项的值.
(′.enter′).val(('.enter').val((′.enter′).val((’.enter’).val() + options.val());
//将选择的表情添加到聊天框
})
3.选择图片文件并发送：
function selectFile(){
$("#file").trigger(“click”); } //触发文件选择的click事件
//获取文件的路径，并预加载在输入框内
$("#file").change(function(){
(".img").attr("src",URL.createObjectURL((".img").attr("src",URL.createObjectURL((".img").attr("src",URL.createObjectURL((this)[0].files[0]));
filepath = URL.createObjectURL($(this)[0].files[0]); //保存图片路径
})
4.后端接收前端请求与聊天内容，并将聊天信息存入数据库
@socketio.on(‘text’, namespace=’/chatroom’) #接收前端发送信息函数
def text(information): #information为前端发送的json数
text = information.get(‘text’) #获取文本信息
user_name = session.get(‘user’) #获取当前用户
sql = “SELECT user_id FROM chatroom.users WHERE email = %s”
params = [session[‘email’]]
user_id = query.query(sql, params) #获取用户ID
sql = ‘INSERT INTO chatroom.messages (content,user_id) VALUES (%s,%s)’
params = [text, user_id]
#将消息内容插入到数据库中，更新数据库
msg = query.update(sql, params)
5.将聊天内容显示在聊天面板上：
$(".chat-discussion").append(" //绑定聊天面板的气泡标签
//创建聊天标签 //添加用户头像 //添加用户名字 "+Username+" //用户发送消息的时间 "+create_time+" //显示用户聊天内容 "+text+" ");
五、实验结果与分析
图5：登录界面
图6：注册界面
图7：联系人界面
图8：更换用户头像
图9：消息记录界面
图10：聊天框编辑界面
图11：发送消息并显示
源代码已上传至github，需要的自取：
/Ao-ao-blare/web-chatroom
