Faii Note

type

status

date

slug

summary

NIS3368 - 项目总结报告

[TOC]

总体目标

GNetChat软件旨在为上海交通大学学生提供一个综合的在线课业交流平台，利用网站的各种内置功能，同学们能够更方便地交流课程和作业问题。

需求说明

现状调查

在目前的课程修业情况中，绝大多数课程中教师与学生的线上交流方式采用了“微信群+Canvas”的方案。其中，微信群通常会承担课程公告的功能，Canvas平台通常会承担课程作业提交与批改的功能。

经过一段时间的观察后，我们组发现这样的课业交流方案存在一定弊端：

微信群存在师生交流频率低，信息量小容易被忽略，难以组织以课程内容/章节内容/学生分组为基础的交流的问题。

Canvas存在资料存取无序，对于作业与课业相关的批改与答疑难以共享的问题，

用户建模

同时，我们组也对课业交流中存在的用户进行分类和建模。GNetChat平台可能的用户如下

学生

教师

管理人员

需求分析

学生需求：

课程/作业内容交流：学生在课程学习过程中可能遇到问题，或对课程特定章节内容有独特的想法。可能需要一个与专业/课程相关的平台以供交流。

分组学习：学生可能需要与同组的同学进行讨论和合作，需要一个可以创建和管理小组的功能，以便共享资料、讨论问题和完成共同任务。

课程作业/公告布置：学生需要能够查看和了解教师发布的课程作业和公告，包括截止日期、要求和相关说明。

教师需求：

课程资料发布：教师需要能够方便地上传和发布课程资料，并且归类到具体的课程内容或章节，以供学生获取和下载，包括课件、讲义、参考书籍等。

分组管理：教师可能需要创建和管理小组，以便学生进行分组学习和协作，并能够查看小组成员的工作进展和互动情况。

课程公告发布：教师需要能够发布课程公告，包括课程相关的通知、提醒和重要事项，以便学生及时了解和掌握课程信息。

管理人员需求：

用户管理：管理人员需要能够管理系统中的用户，包括注册审核、权限管理和用户信息的修改和删除等。

信息内容管理：管理人员需要能够对于平台中信息内容进行管理，并且对不当信息进行溯源和相关处理。

系统维护：管理人员需要能够对系统进行维护和更新，包括软件版本更新、数据库备份和系统性能监控等。

功能设计

用户模块

产品主页子模块

功能描述：

GNetChat产品首页

具体功能：

产品概览：用户可以在产品首页了解产品的功能介绍与展示图

开发者：用户可以在产品首页中了解开发者信息并访问开发者个人主页

登录接口：提供GNetChat的登录接口

登录注册子模块

功能描述：

提供用户注册和登录功能，确保用户可以访问 GNetChat 平台并使用其功能。

具体功能：

用户注册：用户可以通过提供必要的注册信息，如用户名、密码和电子邮件地址，注册一个新的 GNetChat 账户。

用户登录：已注册的用户可以使用其凭据登录到 GNetChat 平台。

帮助与联系子模块

功能描述：

提供帮助和联系支持的功能，以满足用户在使用过程中的问题和需求。

具体功能：

帮助中心：提供常见问题解答、使用指南和平台说明等帮助文档，帮助用户解决常见问题。

联系支持：用户可以通过平台提供的联系方式，向支持团队提交问题、反馈或寻求帮助。

反馈与建议：用户可以提供对平台的反馈和建议，以改进平台的功能和用户体验。

个性化模块

导航子模块

功能描述：

提供网站导航和用户自定义收藏功能，帮助用户快速访问和管理感兴趣的内容。

具体功能：

网站导航：展示平台上的不同功能模块和相关链接，方便用户快速浏览和访问。

自定义收藏：允许用户收藏自己喜欢的链接、帖子或其他内容，方便日后快速查找和访问。

个人主页子模块

功能描述：

提供用户个人主页，显示个人信息和相关内容。

具体功能：

个人信息展示：展示用户的个人信息，如头像、昵称、个人简介等。

我的帖子：显示用户发布的帖子列表，方便用户查看和管理自己的帖子。

收藏夹：展示用户收藏的内容，如链接、帖子或其他收藏项。

用户设置子模块

功能描述：

提供用户个人设置和偏好配置功能。

具体功能：

个人信息编辑：用户可以编辑和更新自己的个人信息，如头像、昵称、个人简介等。

账户安全：用户可以修改密码、设置账户安全选项，如双因素认证等。

偏好设置：用户可以根据个人偏好配置平台的显示语言、主题和通知偏好等。

交互模块

聊天室子模块

功能描述：

提供聊天室功能，允许用户在特定话题下进行实时交流和讨论。

具体功能：

创建聊天室：用户可以创建自己的聊天室，并设定话题、权限和邀请其他用户参与。

加入聊天室：用户可以浏览现有的聊天室列表，并选择加入感兴趣的聊天室。

聊天室交流：用户可以在聊天室中发送消息、分享链接和文件，与其他成员进行实时交流。

帖子子模块

功能描述：

提供帖子功能，允许用户发布和讨论各种话题。

具体功能：

发布帖子：用户可以创建新的帖子，包括标题、内容和标签等信息。

查看帖子：用户可以浏览和查看其他用户发布的帖子，包括回复和评论。

帖子搜索：提供搜索功能，允许用户根据关键词或标签搜索帖子。

信息修改：帖主可以修改帖子信息，选择添加或删除tag

好友子模块

功能描述：

提供好友管理和互动功能，方便用户与其他用户建立和维护联系。

具体功能：

好友添加：用户可以发送好友请求，邀请其他用户成为好友。

好友列表：展示用户的好友列表，方便用户查看和管理好友关系。

好友互动：用户可以与好友进行私聊、分享内容和互相留言等互动。

群聊子模块

功能描述：

提供群聊管理和互动功能，方便多个用户建立和维护联系。

具体功能：

发起群聊：用户可以与好友列表中的好友建立群聊，也可以邀请其他用户加入群聊。

群聊管理：群主可以修改群聊信息并邀请其他用户加入群聊。

群聊互动：用户可以与群聊中的其他群友进行信息交流、图片/文件分享等互动。

退出群聊：用户可以选择退出群聊

开发环境

python依赖库

django==4.2.5

daphne==3.0.2

redis==5.0.0

pillow==10.0.1

channels-redis==4.1.0

channels==3.0.5

uwsgi==2.0.22

ubuntu20.04安装库

openssl

nginx

supervisor

系统实现

后端数据库

Users

Users应用主要以用户模型为主。其中模型User继承自Django内置的用户模型AbstractUser，包括用户ID、用户名、密码等字段，用于用户的身份认证和权限管理。此外，为了实现GNetChat用户模块特有功能，对User模型进行扩展，扩展内容如下：

friends: ManyToManyField类型，作为好友模块的基础。

top_friends: ManyToManyField类型，作为好友模块的置顶好友集合。

email: EmailField类型

同时，设置USERNAME_FIELD为email，REQUIRED_FIELDS为username。

此外，利用装饰器@property定义两个函数image_url，about_me

Chat

Profile

Profile模型用于存储用户详细信息,比如个性签名、头像等。为了按照用户名称首字母来设置默认头像，在此模型中还提供了获取用户首字母缩写与获取预定义头像的方法。

Room

Room模型用于存储聊天室信息,包括聊天室名称、拥有者、简介、头像等。作为聊天室，该模型提供了join函数用于记录用户加入，leave函数用于记录用户离开，同时会实时记录正处于聊天室的用户信息。

Post

Post模型用于存储用户帖子信息,包括标题、内容、作者、创建/修改时间戳等。帖子属于某个聊天室,可以包含多个标签，通过联系来实现模型间的关系。

Tag

Tag模型用于存储帖子的标签信息。

RoomMessage

RoomMessage（简称RM）模型是与Room模型配套的，它用于存储聊天室中的聊天消息。该模型包含了消息内容、发送时间戳和发送用户等信息。此外，它还通过room字段作为对Room模型的外键和belong_post字段作为对Post模型的外键，确保每条消息只属于特定聊天室的特定帖子。

RM还支持发送图片和附件。其中，图片通过image字段的ImageField类型来存储，并使用upload_to参数指定上传路径。附件则通过attachment字段的FileField类型来存储。

在RM中，还定义了一些属性和方法。其中，initial属性返回标题的首字母大写作为消息的初始值。image_url属性根据图片字段的值返回对应的图片URL，如果没有图片则返回默认图片的URL。all_tags属性返回与该消息相关的所有标签。__str__方法返回消息的标题作为其字符串表示。

此外，代码中还定义了一些辅助函数。get_room_image_upload_path函数用于生成房间图片的上传路径。get_friend_files_path函数用于生成好友文件的路径。convert_size函数用于将文件大小转换为易读的格式。validate_file_size函数用于验证文件大小是否超过规定限制。

FriendRequest

FriendRequest模型用于存储用户之间的好友请求信息。在实现好友间申请功能时，将一次好友申请建模为一个model。其中设置了两个不同的ForeignKey作为申请的发起方和申请的发送方。同时，在模型内部存储了好友申请时发送的请求文档。

FriendRoom

FriendRoom模型用于存储好友之间的私聊空间信息。与Room模型类似，比较二者的不同：在Room模型中设置了ManyToManyField来记录聊天室中允许进入的用户，而在FriendRoom中只有两个ForeignKey来记录发起方和接收方。

FMMessage

FMMessage模型用于存储好友聊天室中的消息,与RoomMessage功能类似。

utils

此外，代码中还定义了一些辅助函数。 get_room_image_upload_path函数用于生成房间图片的上传路径。 get_friend_files_path函数用于生成好友文件的路径。 convert_size函数用于将文件大小转换为易读的格式。 validate_file_size函数用于验证文件大小是否超过规定限制。

前端网页逻辑&功能介绍

前端网页逻辑和功能的实现使用Django框架、HTML、CSS和JavaScript等技术。以下是功能介绍：

用户登录和注册页面：提供用户注册和登录的表单，验证用户身份并进行相应的跳转和控制。导航栏：在页面顶部显示导航栏，包含不同功能模块的链接，方便用户快速访问。个人主页：显示用户的个人信息、课程信息、好友列表等，提供相关操作和管理功能。课程页面：展示课程资料、作业列表、公告等内容，允许学生提交作业和教师发布课程相关信息。分组学习页面：显示小组列表和成员信息，提供小组内的讨论和协作功能。论坛页面：显示帖子列表，允许用户发布帖子、回复评论等，实现用户间的交流和讨论。

网络通信

考虑到GNetChat需要实现的实时通信和即时更新功能，普通的同步HTTP Response无法提供即时的反应，因此GNetChat使用Channels、ASGI、Redis和Websocket技术组合，搭建网络通信模块

技术介绍

Websocket： Websockets是一种可以在浏览器和服务器之间建立双向通信的协议（HTTP是一种单向协议）。客户端可以向服务器发送消息，并接收有关相关事件的消息，而无需等待响应。双方可以同时独立沟通。通过Websocket协议实现双向通信，使用户能够实时接收和发送消息。因此，使用Websockets实现客户端与服务器的全双工通信。

ASGI：使用ASGI协议连接Django应用和Web服务器，支持异步处理和高并发请求。当客户端发送HTTP请求时，Django应用程序通过WSGI（Web服务器网关接口）接收它。它最终出现在Django的URL中，并被路由到Django的View中。而对于WebSockets，由ASGI（异步服务器网关接口）而不是WSGI负责。它被路由到Consumer而不是View。通过Consumer编程来对ASGI接受的数据进行处理。

Channels：使用Channels框架处理长连接和异步任务，实现实时通信功能。 Channels是Django的一个扩展，它允许开发者在Django应用程序中使用异步编程。同时，利用Channels框架提供的Consumer，Router等模型，可以更便捷的实现网络通信模块构建。

Redis：使用Redis作为消息队列和缓存，用于处理实时通信和异步任务。其中Redis在GNetChat中具体作用如下

作为消息代理：Channels使用Redis作为消息代理，用于在Django应用程序和Channels工作进程之间传递消息。当一个客户端发送消息到Django应用程序时，消息会被发送到Redis，然后Channels工作进程会从Redis中获取消息并进行处理。Redis作为消息代理可以实现高效的消息传递和分发，确保消息的可靠性和并发处理能力。
作为通道层存储器：Channels使用Redis作为通道层存储器，用于存储和管理通道的状态和连接信息。
作为缓存：Channels中可以使用Redis作为缓存层，用于存储经常访问的数据，提供快速的读取和响应能力。

信息传输流程

爬虫相关

为了提高用户体验和数据的完整性，GNetChat软件可以考虑使用爬虫技术获取课程资料和相关信息。具体内容包括：

爬虫模块：设计和实现爬虫模块，用于从教务系统或其他网站抓取课程资料、公告等信息。数据解析和存储：对爬取的数据进行解析和处理，并存储到后端数据库中，以供用户访问和使用。

LINK

LINK模型用于存储用户收藏的链接信息。作为导航页的组成部分，每个用户可以自定义收藏的链接。其中image_url方法可以根据链接的URL生成对应的图片URL。首先根据URL生成一个文件路径，去除协议、域名和特殊字符，并将其转换为以下划线分隔的形式。然后检查该路径是否存在对应的图片文件，如果存在则返回该图片的URL，否则使用commands.add_download_subprocess函数下载图片，并返回默认图片的URL，该URL为以链接初始值命名的默认图片URL。

为了实现用户通知和提醒功能，GNetChat软件可以集成邮箱服务。以下是相关内容：

邮箱验证码注册功能：

本软件在注册时采用邮箱验证码登录功能。利用邮箱发送验证码和匹配验证码的逻辑图如下：

邮件模板：创建邮件模板，使邮件内容更加友好和可读。

服务器部署相关

为确保系统的可靠性和安全性，GNetChat软件需要进行服务器部署。以下是相关内容：

整体采用nginx进行部署，nginx监听80和443端口，我们通过阿里云服务申请了SSL证书，从而支持了https和wss协议

nginx监听到来自80或443端口的请求后，利用nginx的location功能，根据请求的url字段是否包含‘ws’来将不同的请求转发到不同的后端服务器上。其中，http由uwsgi进行处理，wss由daphne进行处理。

部署相关逻辑图如下：

安全编程相关

HTTPS

HTTPS是一种通过加密和身份验证保护Web通信安全的协议。它在HTTP协议的基础上添加了TLS/SSL加密层，通过使用公钥加密和私钥解密的方式，对传输的数据进行保护。

考虑到作为通讯网站信息的敏感性，GNet通过注册域名，申请证书等方式在服务器部署HTTPS服务，以确保通信的机密性和完整性，保证涉密信息的通信安全。

Hash in URL

为了提高安全性和保护敏感信息，我们在GNet中广泛使用了Hash函数。考虑到URL解析的便利性，在URL中会保存部分冗余信息，而这些冗余信息会导致安全性问题。

因此，GNet在Group中使用哈希作为URL。当用户进行群组创建时，系统会生成一个唯一的标识符或令牌，并使用哈希函数对其进行转换，生成一段看似随机的字符序列作为URL的一部分。这样做的目的是隐藏实际资源或操作的细节，防止未经授权的访问。

完整的身份认证系统

考虑到作为实时通讯网页的隐私保护，我们在GNet中实现了完整的身份验证系统。

首先，利用@login_required装饰器，GNet仅允许已登陆用户进行加入/发起聊天室，添加好友，发起私聊等操作。同时，利用后端数据库中实现的聊天室/私聊聊天室对用户模型的绑定，可以实现聊天功能对用户的部分准入性以及私聊的保密性。

pbkdf2_sha256

pbkdf2_sha256是一种密码哈希函数，用于存储和管理用户密码的安全编程技术。它通过将密码与随机生成的盐值进行多次哈希迭代，以增加密码猜测的复杂性和安全性。

GNet在密码存储时不使用明文存储，而是对密码进行sha256加密后再存储。通过这种方法保护用户账户安全。

邮箱验证码

GNet使用独立的邮箱验证码模块用于验证用户在注册、密码重置等操作中提供的邮箱地址的所有权和有效性。

当新用户请求进行注册操作时，系统会向用户提供的邮箱地址发送包含验证码的邮件。用户需要在操作界面中输入正确的验证码，以证明他们拥有该邮箱地址。邮箱验证码通常具有一定的时效性，一旦超过有效期，验证码将失效。通过这种方式，GNet可以实现对用户信息的初始认证及DDOS防护。

修改/删除确认

GNet中用户对自己帐户的头像/签名，以及对自己发起的聊天室的信息有修改权限。考虑到误操作的可能，GNet实现了删除和修改时的二次确认，以保护用户信息的完整性。

项目成果展示

项目索引页

项目索引页包括四个部分（截图展示了主导览页部分）：

主导览页

项目介绍

项目核心功能展示

开发人员介绍

登陆和注册页面

项目主页

项目主页根据左侧边栏分为六个部分：

Profile 个人主页：用于展示个人信息，用户自定义主页等。

Chats 私聊：用于进行私聊，好友置顶等。

Groups 群聊：用于创建群聊，进行聊天等。

Chatroom 课程交流论坛：用于建立相应课程论坛，在课程论坛中发布交流帖子等。

Contact 好友：用于发送好友申请，同意他人的好友申请等。

Settings 设置：用于修改自己的个人信息。

接下来将分别展示每个部分。

个人主页

个人主页展示如下：

左侧展示了个人信息，右侧则是一个用户可以自主编辑的标签索引主页。用户可以自由选择添加和删除网站的快捷链接。

私聊

私聊页面展示如下：

其中左侧页面展示了所有好友的信息，可以选择把某些好友进行置顶。右侧页面则是具体的聊天页面，可以进行私聊发消息。

群聊

群聊页面展示如下：

其中左侧页面展示了所在的和所创建的所有群聊。右侧则是群聊的具体页面。

课程交流论坛

好友

好友页面展示如下：

当有好友添加请求时，在好友栏会出现一个红点，然后在new中可以查看好友请求，选择同意或者拒绝。当好友添加成功之后，好友页面的好友栏和私聊页面的好友信息展示都会多一个好友，可以进行私聊。

设置

设置页面展示如下：

设置页面可以通过点击左侧栏右上角的edit或者头像右下角的按钮进行设置，修改个人信息，修改后涉及个人信息的展示页面会相应修改。

管理过程

分工

麻家乐：前端、后端

刘发中：后端

刘灿：前端、后端

黄天浩：后端

工作管理

使用Github实现工作流管理。开发团队通过拉取本地分支，Pull Request等操作实现合作开发。仓库网址：https://github.com/heatingma/NIS3368-website

开发流程

版本日志

0.1.2版本

新增功能1：Chatroom的信息修改（image和about）【只有拥有者具有权限】

新增功能2：Chatroom可以修改名称，在修改之后对应的media文件夹以及默认chatting都将进行改变【只有拥有者具有权限】

新增功能3：Chatroom和Post的，同样只有拥有者具有权限，且进行多重身份认证，删除时同时删除对应的media文件夹

BUG修复1：修复了settings中头像旁边笔无法edit的bug

BUG修复2：修复了上传头像时出现的server error，原因是nginx默认最大传输不超过1MB，现在修改为5MB，并加上提示性说明文字

0.1.3版本

新增功能1：Post的信息修改（image和about和tag）【只有拥有者具有权限】

新增功能2：新增tag

0.1.4版本

新增页面：产品介绍页

0.1.5版本

新增功能1：好友添加功能（发送邀请&同意邀请&拒绝邀请）

新增功能2：好友置顶功能（从好友中选择置顶&从置顶中删除）

0.1.6版本

新增功能1：删除好友

新增功能2：好友聊天

0.1.7版本

bug修复：进行IP内测，修复以下bug

聊天室长内容无法换行（利用 word-break:break-all;）
Chat group的默认图像未设置
群聊名字里无中文（直接禁止）
群聊名字里无空格
删完好友的dark没做（其实所有表单的dark都有问题）
表单的刷新问题
好友重复申请问题
Post如果同名+tag会出问题，改顺序
一些图标的修正
左上角图标在一些时候会失踪

新增功能：修改密码

0.1.8版本

新增功能：body_my的设计，新增快捷导航功能

0.1.9版本

功能优化：对快捷导航功能进行优化，实现多线程后台爬虫

0.2.0版本

项目部署：将项目部署到新服务器上

0.2.1版本

新增功能：邮箱验证码功能

0.2.2版本

页面修改：登录界面全面修改

域名访问：项目成功实现域名访问

0.2.3版本

bug修复1：修复了滚动条异常问题

bug修复2：对my-body界面的guide修改，统一命名方式

bug修复3：支持http-ws（本地测试）与https-wss（服务器部署）

bug修复4：修复了chatfriend界面无法执行好友置顶功能的问题

功能添加：添加默认导航（教学信息网，jbox，jmail，CNMOOC）

0.2.4版本

official: 第一个正式版本，清除了内测的所有数据库，修改了superuser的密码

内容修改：修改了所有的media的路径，便于后续删除

新增功能：修改了my_body部分，最多展示一行，其余以滑动形式呈现，添加了隐藏按钮

0.2.5版本

模块新增：新增Group模块

bug修复：修复了v0.2.5中出现的bug

功能优化：优化了link部分关于github的图标

模块优化：优化了chatroom和post的图标问题，现在只有没有上传图片的帖子和聊天室才显示默认字母图，否则显示上传的图片

0.2.6版本

功能支持：支持中文命名聊天室/帖子/群聊

总结与展望

本项目基本实现了一个便捷易用的、综合的在线课业交流平台，能够实现论坛，群聊，私聊等各种形式的低延迟交流，同时具备一定的安全性。在未来，我们希望能够实现类似朋友圈，刷帖点赞等更多的功能，同时不断更新迭代完善网站的漏洞，并进一步发掘网站的商业价值。