基于flask-socketio的web聊天室

一、总体设计
项目整体采用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语句： db.commit() ；
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，需要的自取：
https://github.com/Ao-ao-blare/web-chatroom

基于flask-socketio的web聊天室相关推荐

基于socket.io的web聊天室
基于socket.io的web聊天室一. 项目介绍该项目使用node.js作为后端服务器框架,并利用socket.io来实现web聊天室功能.socket.io是由 JavaScript 实现的基 ...
基于Springboot+Netty实现Web聊天室
文章目录一.创建项目二.编写代码三.项目测试总结参考一.创建项目在IDEA中新建Spring项目选择JDK版本,然后点击next 选择Spring Web 设置项目名称与位置二.编写 ...
基于Springboot+Netty实现Web聊天室【网络通信编程】
目录一.IDEA创建项目二.编写代码三.运行程序四.参考文献一.IDEA创建项目在IDEA中创建一个Spring框架的项目 JDK版本选择8(也就是1.8) 二.编写代码 DemoAppl ...
【IDEA】基于Springboot+Netty实现Web聊天室
一.项目创建 IDEA中新建Spring项目二.环境配置 1.在pom.xml里面添加依赖 <dependency><groupId>io.netty</groupId ...
WebSocket请求过程分析及实现Web聊天室
WebSocket协议是基于TCP的一种新的协议.WebSocket最初在HTML5规范中被引用为TCP连接,作为基于TCP的套接字API的占位符.它实现了浏览器与服务器全双工(full-duplex ...
基于阿里云用C/C++做了一个http协议与TCP协议的web聊天室的服务器——《干饭聊天室》
基于阿里云用C/C++做了一个http协议与TCP协议的web聊天室的服务器--<干饭聊天室> 在这里首先感谢前端小伙伴飞鸟前端技术请看一款基于React.C++,使用TCP/HTTP协 ...
基于.NET SingalR,LayIM2.0实现的web聊天室
LayIM官网 http://www.layui.com/doc/layim.html 博客教程:http://www.cnblogs.com/panzi/p/5767095.html 项目说明:基于 ...
【项目设计】基于WebSocket的Web聊天室
文章目录 1. 项目简介 2. 数据库表的设计 3. 实体类以及工具类的设计 3.1 实体类model 3.1.1 lombok的使用 3.2 工具类util 3.2.1 DBUtil 3.2.2 W ...
基于Python的多人聊天室的设计与实现
基于Python的多人聊天室的设计与实现摘要本文介绍了基于即时通讯的Python实现web版多人聊天室的设计和实现.这个系统利用了多种先进的技术,如Django.Channels.WebSock ...
使用FastHttpApi构建多人Web聊天室
为什么80%的码农都做不了架构师?>>> 一般在dotnet core下构建使用web服务应用都使用asp.net core,但通过FastHttpApi组建也可以方便地构建w ...

基于flask-socketio的web聊天室

基于flask-socketio的web聊天室相关推荐

最新文章

热门文章